How to Reload Current Page Without Losing Any Form Data

How to reload current page without losing any form data?

You can use various local storage mechanisms to store this data in the browser such as the Web Storage API, IndexedDB and WebSQL (deprecated) (and UserData with IE).

The simplest and most widely supported is Web Storage where you have persistent storage (localStorage) or session based (sessionStorage) which is in memory until you close the browser. Both share the same API.

You can for example (simplified) do something like this when the page is about to reload:

window.onbeforeunload = function() {
    localStorage.setItem("name", $('#inputName').val());
    localStorage.setItem("email", $('#inputEmail').val());
    localStorage.setItem("phone", $('#inputPhone').val());
    localStorage.setItem("subject", $('#inputSubject').val());
    localStorage.setItem("detail", $('#inputDetail').val());
    // ...
}

Web Storage works synchronously so this may work here. Optionally you can store the data for each blur event on the elements where the data is entered.

At page load you can check:

window.onload = function() {

    var name = localStorage.getItem("name");
    if (name !== null) $('#inputName').val("name");

    // ...
}

getItem returns null if the data does not exist.

Replace "localStorage" with "sessionStorage" in the code above if you want to store data only temporary.

How to prevent data from being lost when page refreshed?

As per my understanding, If you are handling this from client side code the following link will help you.

using Window.sessionStorage you can achieve, the way you want. But you need to handle it appropriately on every key press to store the data into the object and also retrieval.

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

How do I reload a page without a POSTDATA warning in Javascript?

Just changing window.location in JavaScript is dangerous because the user could still hit the back button and resubmit the post, which could have unexpected results (such as a duplicate purchase). PRG is a much better solution

Use the Post/Redirect/Get (PRG) pattern

To avoid this problem, many web applications use the PRG pattern — instead of returning an HTML page directly, the POST operation returns a redirection command (using the HTTP 303 response code (sometimes 302) together with the HTTP "Location" response header), instructing the browser to load a different page using an HTTP GET request. The result page can then safely be bookmarked or reloaded without unexpected side effects.

Client Side

If you want to do it entirely client side, you'll need to change the browser history before you do the refresh:

if ( window.history.replaceState ) {
    window.history.replaceState( null, null, window.location.href );
}
window.location = window.location.href;

How to reload the page without losing variables value

$(document).ready(function() {
    var data='<s:property escape="false" value="simInfos" />';
    localStorage["myData"] = data;

    // later on (maybe after page refresh, whatever)
    var myLoadedData = localStorage["myData"];
}

You can treat HTML5's localStorage like any other object, although it has specific setter and getter functions and can only store strings. Don't treat it like a permanent cache though, just a place to store some data for a little while. Another reference.

---

Related Topics