Remember previously entered data in an input field using local storage in Javascript

If you are using input fields in your application and want the input to remember the previously entered data by the user then you can use Javascript local storage. We are explaining it in this post with working code examples and a demo.

function save_data_to_localstorage(input_id) {
   const input_val = document.getElementById(input_id).value;
   localStorage.setItem(input_id, input_val);
   console.log(input_val);
}


input_txt_1.addEventListener("keyup", function() {
   save_data_to_localstorage("input_txt_1");
});

input_txt_2.addEventListener("keyup", function() {
   save_data_to_localstorage("input_txt_2")
});

function init_values() {
   if (localStorage["input_txt_1"]) {
      input_txt_1.value = localStorage["input_txt_1"];
   }
   
   if (localStorage["input_txt_2"]) {
      input_txt_2.value = localStorage["input_txt_2"];
   }
}

init_values();

Check the live demo of the code here

We are using localStorage in Javascript to store our input data here. And when a user comes back to the website it will re-render the values to the input field if it gets the data from the local storage.

Let's understand it step by step. Create HTML markup in your webpage with input fields.

<div>Enter some data and refresh the page</div>
<input type="text" id="input_txt_1">
<br><br>
<input type="text" id="input_txt_2">

We have created two input fields here that have ids - input_txt_1 and input_txt_2. We will get and set values of input to the local storage using the input ids.

Now add some javascript code to make the input remember previously entered data.

function save_data_to_localstorage(input_id) {
   const input_val = document.getElementById(input_id).value;
   localStorage.setItem(input_id, input_val);
   console.log(input_val);
}


input_txt_1.addEventListener("keyup", function() {
   save_data_to_localstorage("input_txt_1");
});

input_txt_2.addEventListener("keyup", function() {
   save_data_to_localstorage("input_txt_2")
});

function init_values() {
   if (localStorage["input_txt_1"]) {
      input_txt_1.value = localStorage["input_txt_1"];
   }
   
   if (localStorage["input_txt_2"]) {
      input_txt_2.value = localStorage["input_txt_2"];
   }
}

init_values();

We have assigned keyup event listeners on the input fields to get and set data.

Full code example

<div>Enter some data and refresh the page</div>
<input type="text" id="input_txt_1">
<br><br>
<input type="text" id="input_txt_2">

<script>
function save_data_to_localstorage(input_id) {
   const input_val = document.getElementById(input_id).value;
   localStorage.setItem(input_id, input_val);
   console.log(input_val);
}


input_txt_1.addEventListener("keyup", function() {
   save_data_to_localstorage("input_txt_1");
});

input_txt_2.addEventListener("keyup", function() {
   save_data_to_localstorage("input_txt_2")
});

function init_values() {
   if (localStorage["input_txt_1"]) {
      input_txt_1.value = localStorage["input_txt_1"];
   }
   
   if (localStorage["input_txt_2"]) {
      input_txt_2.value = localStorage["input_txt_2"];
   }
}

init_values();
</script>

Was this helpful?