Is it possible to persist (without reloading) AJAX page state across BACK button clicks?

Question

I am familiar with several approaches to making the back button work in AJAX applications in various situations, but I have not found a solution that will work gracefully in my specific scenario.

The pages I am working with are the search interface for a site. You enter terms in a normal search box, click "go and wind up at a search results page. On the search results page there are a ton of UI controls for filtering/sorting the search results to find what you are looking for. Some of the operations triggered by these controls may take a (relatively) long time to complete (e.g. several seconds).

This latency is fine in case where the user is initially filtering/sorting their results... there's a nice AJAX spinner and so on... however when the user clicks on a search result and then clicks on the BACK button, I would like the page to instantly be restored to the state it was in when they clicked through.

I can restore the states using IFRAMEs/fragment identifiers as a dictionary of page history, but what ends up happening is that when the user first hits the back button the initial page is loaded, then it (re) makes the AJAX query to get the page state back, which triggers the AJAX spinner and another wait of possible several seconds.

Is there any approach that does not require this kind of two-stage load of the page when the user returns to the page via the BACK button?

Edited to add: I am partial to jquery but I'd be happy with solutions that depend on other libraries/toolkits or that are standalone/raw javascript.

Edited to add: I should've added that I'm trying to avoid cookies/sessions because this prevents people having multiple brower windows/tabs open and manipulating different sets of search results at the same time.

Edit: Matt, can you elaborate on your proposed solution (triggering a page change event via fragment identifer)? I see how this would help with BACK button clicks across the same page but not coming BACK to the search results page after clicking on a specific result.

Answer 1

Just use a cookie.

Answer 2

Would it help to trigger a page change event using the "Add some info to the # at the end of the URL approach".

That way, clicking the back button shouldn't actually change the page, and you should be able to restore state without the first page load.

Answer 3

Use something persistent that is tied to the user's profile.

Cookies and sessions are good ideas, but you can also keep those stuff in the database. That gives you an added advantage of being able to save the user's filtering preferences accross different browsing session.(if, for exampple, he was looking for something in the office and then decided to continue searching when he is back at home).

It all depends on the complexity of the filters and weather or not it is something you think that the user will want to use accross diffrent browsing sessions..

Answer 4

Edited to add: I should've added that I'm trying to avoid cookies/sessions because this prevents people having multiple brower windows/tabs open and manipulating different sets of search results at the same time.

You can create a random token and assign it to the fragment identifier.

• on first page load create a token if no fragment identifier is set
• before navigating out, store all the temporary ajax data in a cookie with that token as index.
• when hitting back, if you have a fragment identifier set, load the data from the corresponding token in the cookie.
• you can even add a "time" field to expire tokens, etc...

sample cookie (JSON):

{"ajaxcache":[{"token":<token>,"time":<time>,"data":<data>}, ... ]}

Answer 5

Have you investigated the YUI Browser History Manager?