Question

I’m looking for a jQuery way to keep elements of the page persistent on the user’s screen while refreshing the page. It changes when I refresh the page and I lose the contents in the jQuery page.

I need the page to be persistent. How to refresh the page and keep elements non-refreshed (persistent) until the user clicks the submit button. How can this be done?

Answer 1

Since refreshing the whole page is loading a whole new page, the only way you can preserve the data entered so far into the page is to have already saved it off to some storage location before the refresh and then upon loading a new page, you read it back in from the storage location.

Feasible places to store data are:

1. Cookies.
2. Store from server with ajax calls (like autosave), then either retrieve via ajax or have the server put the saved values back in the form upon refresh.
3. Store in HTML5 web storage (only works in newer browsers).
4. Store in another window or frame (from the same domain) that is not refreshed.

The other possibility is to avoid refreshing the page. You don’t say why you are refreshing the page in the first place, but it it’s just for the purposes of updating some content in the page, then you could use ajax to fetch the updated content and use jQuery to put the new content into the page and avoid the refresh entirely. Doing it that way, the existing data in the page would remain untouched.