Home How to properly save form data in local storage for later usage in javascript

Questions

How to properly save form data in local storage for later usage in javascript

August 29, 2022

I need to save form data (firstname and lastname) in localstorage once the form is submitted so that i will not have to type it again the next time i want to submit the form.

I have tried the code below but when i refreshed the page, form data is not saved on localstorage.

<!DOCTYPE html>
<html>
  <head>
    <title></title>

  </head>
  <body>


<script  type="text/javascript">
  function store(){

     var firstname= document.getElementById('firstname').value;
     localStorage.setItem("firstname_data", firstname);

     var lastname= document.getElementById('lastname').value;
     localStorage.setItem("lastname_data", lastname);


var storedValue_firstname = localStorage.getItem("firstname_data");
var storedValue_lastname = localStorage.getItem("lastname_data");

 alert(storedValue_firstname);
alert(storedValue_lastname);

              //document.getElementById('firstname').value = storedValue_firstname;
//document.getElementById('lastname').value = storedValue_lastname;


//window.location='/';
    }
</script>
 
<form  action="test.php" class="form1"  method="post" /> 
<input name="firstname" type="text" id="firstname" class='' placeholder="firstname" /><br>
<input name="lastname" type="text" id="lastname" class='' placeholder="lastname" /><br>



<button onclick="store()" type="button">Store Form Data</button>
</form>
  </body>
</html>

>Solution :

you can try to use windows.onload event. When you reload the page, with this event you can check if anything is stored in the localstorage or not. if stored then will set this value to the input field as required. see the example code here

<!DOCTYPE html>
<html>
  <head>
    <title></title>

  </head>
  <body>     
<form  action="test.php" class="form1"  method="post" /> 
<input name="firstname" type="text" id="firstname" class='' placeholder="firstname" /><br>
<input name="lastname" type="text" id="lastname" class='' placeholder="lastname" /><br>

<button onclick="store()" type="button">Store Form Data</button>
</form>
  <script  type="text/javascript">
  function store(){
     var firstname= document.getElementById('firstname').value;
     localStorage.setItem("firstname_data", firstname);

     var lastname= document.getElementById('lastname').value;
     localStorage.setItem("lastname_data", lastname);


      alert(storedValue_firstname);
      alert(storedValue_lastname);


    }
    
   window.onload = function exampleFunction() {
    var storedValue_firstname = localStorage.getItem("firstname_data");
    var storedValue_lastname = localStorage.getItem("lastname_data");
    if(storedValue_firstname) {
      document.getElementById('firstname').value = storedValue_firstname;
    }
       if(storedValue_lastname) {
      document.getElementById('lastname').value = storedValue_lastname;
    }
  }
</script>
  </body>
</html>