How to remember form data that has not been submitted?

Question

How can you make the browser remember what the user typed in the form, which has not yet been submitted and make the page refreshing not affect the data entered?

I have a form in which the user enters a number. Initially the form has 0 by default. I am storing the data in localStorage, so the browser can remember the data. However, when the page is refreshed, the user-entered data disappears and 0 is displayed by default. (still the localStorage data exists for it)

I tried to use jQuery's

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

but it does not work. Can anyone give me a piece of advice on this?Thank you in advance.

Edited: My form looks like this:

<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 the data to localStorage like 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); 

cookiesample.type could be remembered unless the cookie is deleted.

Answer 2

Checkout this codepen I have it shows a functional solution to the problem. Also you need to make sure jQuery script checks if the DOM is ready, you can do that by using $(function() { }) a 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));
  });
});