How to avoid ajax reload when clicking back button

Question

I have a page that used Ajax to create a list of results. Then there is a link to go to another details page. When I'm on the details page and click the back button. The list of results pages will reload again. In any case, to stop ajax reload and cache the result. There is also caching position.

thank you for your help

Answer 1

Some projects that I have done with bookmarks regarding the control of AJAX / back buttons

https://github.com/browserstate/history.js

https://github.com/tkyk/jquery-history-plugin

As for your second question, if your browser supports a local database, you can cache the result there. The following project provides a single API in browsers.

https://github.com/marcuswestin/store.js

https://github.com/alexmng/sticky

A position can also be stored in localDB.

Answer 2

You can save state by changing the window.location.hash property. A hash is the only part of the URL that you can change rather than force a reload of the URL.

window.location.hash = 'some-id'; translates to your URL, which looks like this: index.html#some-id .

Then you can get the hash when the page loads, and set the user interface to the correct state:

 if (window.location.hash == 'some-id') { //setup UI for `some-id` identifier } 

Answer 3

https://developer.mozilla.org/en/DOM/Storage

Keep your data with a time stamp. Make sure you save the data and that it is not older than you. If it is older, retrieve the new data. If you are not using saved data.

(this is not mozilla specific)

http://caniuse.com/#search=local%20storage

Answer 4

You can use the new HTML5 LocalStorage system to create a cache. Here's the link: http://playground.html5rocks.com/#localstorage