Keep Input Value After Refresh Page

Keep input value after refresh page

EDIT: Keep value of more inputs

HTML:

<input type="text" id="txt_1" onkeyup='saveValue(this);'/> 
<input type="text" id="txt_2" onkeyup='saveValue(this);'/> 

Javascript:

<script type="text/javascript">
        document.getElementById("txt_1").value = getSavedValue("txt_1");    // set the value to this input
        document.getElementById("txt_2").value = getSavedValue("txt_2");   // set the value to this input
        /* Here you can add more inputs to set value. if it's saved */

        //Save the value function - save it to localStorage as (ID, VALUE)
        function saveValue(e){
            var id = e.id;  // get the sender's id to save it . 
            var val = e.value; // get the value. 
            localStorage.setItem(id, val);// Every time user writing something, the localStorage's value will override . 
        }

        //get the saved value function - return the value of "v" from localStorage. 
        function getSavedValue  (v){
            if (!localStorage.getItem(v)) {
                return "";// You can change this to your defualt value. 
            }
            return localStorage.getItem(v);
        }
</script>

Trying to get text input values to stay after refresh with localStorage, what's wrong with my code?

I tested this on jsfiddle - (https://jsfiddle.net/dyLbgfk2/17/), switched this line:

document.getElementById("qty").onload = getValue;

To:

document.getElementById("qty").onload = getValue();

It appears to work as intended with this slight modification.

Thanks to @Heretic Monkey for pointing out that the input element has no onload event.

It would be better to do this with your code and have this run once the DOM has loaded:

document.addEventListener("DOMContentLoaded", function() {
    //document.getElementById("qty").onkeyup = store;
    //Better to use .addEventListener()
    document.getElementById("qty").addEventListener("keyup", store, false); 
    getValue(); // Just call the function as this event will fire once the DOM
                //Including your input has loaded
});

React retains the input value after the page is refreshed and keeps it in local storage

First you want to store your input's value in react state

const [value, setValue] = useState("");

When the input changes, write the change to react state, and also localStorage

const handleChange = (e) => {
  setValue(e.target.value);
  localStorage.setItem("inputValue", e.target.value);
};

When the component is mounted, we want to set the initial state of the input to the value in localStorage

useEffect(() => {
  setValue(localStorage.getItem("inputValue"));
}, []);

Finally, hook the handler to onChange, and use the React state as the form value

<input
  value={value}
  onChange={handleChange}
/>

See: https://codesandbox.io/s/react-input-not-reload-after-refreshing-forked-q84r8?file=/demo.js

How to save user inputs after refreshing the page using local storage

You have many "comprehension" mistakes in your code. I commented them one by one.

// This array should be declared inside the addText function.
// Else, everytimes the user saves, the array will grow...
// And it will end in more data than the amount of inputs.
let time = [];
const addText = (ev) => {
  let newTime = {

    // Here, the targetted elements are divs. There is no value to a div.
    timeData: document.querySelectorAll("#hour Block, #hourBlock1, #hourBlock2").value,

    // Here, you will get a value... 
    // But always the value of the first .text-input of the page.
    textData: document.querySelector('.text-input').value
  }
  time.push(newTime);
  localStorage.setItem('My Time', JSON.stringify(time));
}

// The event handler is setted only for the first button.
document.querySelector('.saveButton').addEventListener('click', addText);

// The first .text-input value will be setted to "null"
// Because there is no "addText" item in localStorage.
// You saved under the item named "My time".
document.querySelector('.text-input').value = localStorage.getItem('addText');

So here is a working code. Have a close look at the differences.

const addText = (ev) => {
  let time = [];

  let fields = document.querySelectorAll(
    "#hourblock, #hourBlock1, #hourBlock2"
  );
  fields.forEach(function (element) {
    time.push({
      field: element.id,
      text: element.querySelector(".text-input").value
    });
  });
  console.log(time);
  localStorage.setItem("timeData", JSON.stringify(time));
};

document.querySelectorAll(".saveButton").forEach(function (btn) {
  btn.addEventListener("click", addText);
});

// on page load
let stored = JSON.parse(localStorage.getItem("timeData"));
if (stored) {
  console.log(stored);
  stored.forEach(function (item) {
    document
      .querySelector("#" + item.field)
      .querySelector(".text-input").value = item.text;
  });
}

This is working in CodePen.

Save input and after refresh keep the value in the input

Set and Get Local Storage using JavaScript

Set value in local Storage

localStorage.setItem("localStorageValue", "local Storage value");

Get value from local storage

localStorage.getItem("localStorageValue");

---

Related Topics