Ajax updated User Interfaces and the Back Button

Scenario:

• A page is loaded with a complex UI on it.
• User does some actions which alter data via Ajax callbacks, changes are reflected on the UI by DOM manipulation (e.g. via jQuery).
• User clicks a link to go to another page (say a details page).
• User clicks the back button to go back to the original UI page.
• User sees out-of-date information - it looks like the开发者_高级运维 changes he made (in step 2) never happened.

How do you deal with this situation?

Cookies. The only way to save information after the user leaves a page and comes back is with cookies.

Better way to do this is

0. user goes to your page 
1. A page is loaded with complex UI based on what is saved in the users cookies (default if no cookie)
2. user does some actions, which are saved into the cookie
3. user goes to another page

You could force the page to refresh when the back button is pressed which will then pull the updated data from the server.

<META http-equiv="Cache-Control" content="no-cache">
<META http-equiv="Pragma" content="no-cache">
<META http-equiv="Expires" content="-1">

you might also want to take a look at Real Simple History and see if you can take advantage of their techniques to utilize the Back button.

Whatever data is passed to the next page would need to also be passed back to change the UI to the way it needs to be.

This could be done with cookies, or it could be done using post data/server side logic. Just pass the values to the second page, and when the user wants to come back just be sure to pass them back as well and alter the interface depending on the values. You could even use a session for this is you wanted, but I think that may be overkill if this is the only place you will need it.

Metropolis

Cookies are not the only way. Think about the jQuery BBQ Plugin. See http://mattfrear.com/2010/03/20/enabling-browser-back-button-on-cascading-dropdowns-with-jquery-bbq-plugin/

Basically, it uses #variables added to the query string to fool the browser into thinking it's a new page, so if you were to refresh, or go back to the page, the #variable's will repopulate the controls.