Dolly Chan
Dolly Chan

Reputation: 103

How to avoid ajax reload when you click the back button

I have a page that used Ajax to generate the a list of result. Then there is a link to click to another detail page. When I'm at the detail page, and click the back button. The list of results page will reload again. Is there anyway to stop the ajax to reload again and cache the result. Also is there anyway to cache the position also.

thank you for your help

Upvotes: 4

Views: 1685

Answers (4)

Olivier Refalo
Olivier Refalo

Reputation: 51435

A few projects I had bookmarked regarding the AJAX/back button management

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

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

Regarding your second question, if your browser supports local DB you may cache the result there. The following project provide a uniform API across browsers.

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

https://github.com/alexmng/sticky

Position can also be stored in the localDB.

Upvotes: 2

Malk
Malk

Reputation: 11983

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

Upvotes: 0

Gus
Gus

Reputation: 6871

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

Store your data with a timestamp of some sort. Check to see if you have stored data and that it's not older than you would like it to be. If it's older, fetch new data. If not use the stored data.

(it's not mozilla specific)

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

Upvotes: 0

Jasper
Jasper

Reputation: 75993

You can save state by changing the window.location.hash property. The hash is the only part of the URL that you can change and not force a reload of the URL.

window.location.hash = 'some-id'; will translate into your URL looking like this: index.html#some-id.

You can then get the hash when the page loads and set the UI to the proper state:

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

Upvotes: 0

Related Questions