如何在页面刷新时保留字段数据

I am trying to create a basic form that will allow me to add details of a manual form into a database but the problem I am having is I cannot retain the data in the fields if the page gets refreshed.

jsfiddle

I want to be able to retain all the data in the fields if the page is accidently refreshed using sessions but I cannot do not know how to create the code to store data using session which will allow me to add the details into a MySQL database that I have yet to create that and look into how to add the data using Ajax.

Any help on how to retain the data using SESSIONs that is entered in the dynamic form will be most appreciated.

Use cookie for this purpose :

Before leaving page, make the copy of form data in cookie and on refresh refill the form again using those cookie.

As soon as you submit the page, the data is sent to the server and a new page is loaded (your case, this is the same page as before) you might look at using jQuery.post or jQuery.ajax to send the form data to the server rather than actually submitting the form.

window.onbeforeunload = function(e) {
    var val = document.getElementById("sampleData").value;
    document.cookie = "SampleData="+val+";";
};

window.onload = function() {
  var cook = document.cookie;
  cook = cook.split(";");
  for(var i=0; i < cook.length ; i++){
    var tempSingleCookie = cook[i].split("=");
    if(tempSingleCookie[0] === "SampleData")
    {
        document.getElementById("sampleData").value = tempSingleCookie[1];
        //Some old date
        document.cookie = "SampleData= ;expires=Thu, 18 Dec 2013 12:00:00 UTC";
    }
  }
};

<table>
<tr>
<td>
Sample Data
</td><td><input id="sampleData" type="text"></td>
</tr>
</table>

</div>