How to remember form data that has not been submitted?

Question

How can you make the browser remember that the user entered into a form that has not yet been submitted, and make the page refresh not affect the entered data?

I have a form in which the user enters a number. By default, the form has 0 by default. I store data in localStorage, so the browser can remember the data. However, when the page refreshes, the data entered by the user disappears, and the default is 0. (localStorage data exists for this)

I tried using jQuery

$(".formClassName").val(localStorage.getItem(key)); 

but that will not work. Can anyone give me some advice on this? Thanks in advance.

Edited: My form is as follows:

 <form> <!--There are multiple forms, and the only difference among them is the "name" attribute --> Enter a number <input type="text" value="0" class"dataEntered" name="****"> <!--The button below saves the data entered in the above form --> <input type="button" class="savedata" value="Save Value" name="****"> </form> 

And I am adding data to localStorage as below:

 //JavaScript <script> //Using on because the website retrieves the above form dynamically $(document).on("click", ".saveData", function(e){ //retrieve the number entered in the form var userNum = $(this).siblings(".dataEntered").val(); //retrieve the value in name attribute var thisFormName = $(this).attr("name"); //store the data localStorage.setItem(thisFormName, userNum); //Now that the save button has been pressed (not submitted to the //server yet), and the data is stored in localStorage, I want to //the page to show the number in userNum even after you refresh the page //but this does not work. $(".dataEntered").val(localStorage.setItem(thisFormName)); }); </script> 

Answer 1

use cookie:

 function addCookie(sName,sValue,day) { var expireDate = new Date(); expireDate.setDate(expireDate.getDate()+day); document.cookie = escape(sName) + '=' + escape(sValue) +';expires=' + expireDate.toGMTString(); } function getCookies() { var showAllCookie = ''; if(!document.cookie == ''){ var arrCookie = document.cookie.split('; '); var arrLength = arrCookie.length; var targetcookie ={}; for(var i=0; i<arrLength; i++) { targetcookie[unescape(arrCookie[i].split('=')[0])]= unescape(arrCookie[i].split('=')[1]); } return targetcookie; } 

---

 addCookie('type','1',1024); var cookiesample = getCookies(); $(".formClassName").val(cookiesample.type); 

cookample.type can be remembered if cookies are not deleted.

Answer 2

Checkout codepen I have a functional solution to the problem. You also need to make sure that the jQuery script checks if the DOM is ready, you can do this using the $(function() { }) short hand for .ready() .

 $(function() { var input = $("[type=text]"); var thisFormName = input.attr("name"); if (localStorage.getItem(thisFormName)) { var value = parseInt(localStorage.getItem(thisFormName)); input.val(value); } $(document).on("click", ".savedata", function(e) { var userNum = input.val(); localStorage.setItem(thisFormName, userNum); input.val(localStorage.getItem(thisFormName)); }); });