How do I update input value when page reloads using localstorage?

user_10870402 0
Viewed 636

When a user enters text into the input element, I want to be able to save what they type, so that if they refresh it will still be cached. 

const input = document.getElementById('input')
input.onchange = function(){
  const key = input.value;
  localStorage.setItem('key', key)
  input.value = localStorage.getItem("key");
};
local-storage html javascript
5 Answers

Simply assign the value to the input element outside of the event handler function:

const input = document.getElementById('input')
input.value = localStorage.getItem("key"); // get and assign the value outside 
input.onchange = function(){
  const key = input.value;
  localStorage.setItem('key', key);
};

Please Note: You can also consider using oninput instead of onchange.

user_74613810 
<body onload="reloadData()">
 <!-- your html here -->
</body>
<script>
    const input = document.getElementById('input')
    input.onchange = function(){
        const value = input.value;
        localStorage.setItem('key', value);
    };
    function reloadData() {
        input.value = localStorage.getItem('key') || ''
    }
</script>

reloadData function will be invoked when page is load. This will work as you want.

user_75127620

Likely something likes this, just add a load event listener that sets the input value from localStorage or a default value if nothing is in localStorage yet?

const input = document.getElementById('input')
input.onchange = function(){
    const value = input.value;
    localStorage.setItem('key', value);
};

document.addEventListener('load', ()=> {
    input.value = localStorage.getItem('key') || '';
})
user_51135680

At the top of your page, add this window.onload statement:

window.onload = function() {
    var data = localStorage.getItem(“key”);
    if (data) {
        document.getElementById(“input”).value = data;
    }
};
// Rest of your code here
user_102217650

First, save the value to localstorage every change. Then, when the page reloads, use localStorage.getItem().

var input = document.getElementById("myinput") // Get my input

function restore(){
  var lst = localStorage.getItem("inputdata") // Get your data from local storage
  
  if(lst === null || lst === undefined){
    return; // return if the user has not visited this site/input
  }
  
  input.value = lst; // Sets the value of the input to the restore data
  
  return;
}

restore()

function save(event_data){
  localStorage.setItem("inputdata",input.value) // Save the value in localStorage
}

input.addEventListener("change",save);
Input Something Here <input id="myinput">

This works but I recommend using cookieStorage for this.

user_108626720
Related