Reload or maintain DOM state using Jquery after browser back button pressed
I need a browser page to maintain it's post ajax changed state after the user navigates away and hits the back button to return to it. Unfortunately items previously faded out with jQuery are visible or dynamically added items (via ajax) disappear once the user hits the back button to return to a page.
I've tried about 20 different no-cache meta and header solutions and none seem to work in Chrome 13.0.782 for mac. I've also tried the onunload solution outlined here: Is there a cross-browser onload event when clicking the back button? to no avail.
Ideally I'd like the page state to remain the same (with all jQuery changes to the DOM) without having to reload it, but I would be happy with the ability to reload the page when a user navigates back to it.
I realize there are multiple questions about reloading after the bac开发者_运维百科k button is pressed, but none of the solutions work in my situation.
A common practice, such as the one used by google is to append a hash value to the url. So for example, after you fade some divs out you could do
window.location.hash = "hide_div";
Then you would put a onHashChange listener
$(window).bind('hashchange', function() {
var hash_value = window.location.hash;
if ( hash_value === 'hide_div' )
// hide certain divs
});
P.S This is a very rough pattern for maintaining ajax state.
EDIT: I would suggest also taking a look at the History API in HTML5.
You need Really Simple History:
http://code.google.com/p/reallysimplehistory/
EDIT: Alternately you can stash the innerHTML of the BODY
and store it in window.name
as a string, using the onbeforeunload
event. Then set a cookie so when the page reloads and you detect the cookie and can the value of window.name
back into the BODY
.
If you just want to get a pagerefresh from the server on a back-button, use cache-control 'no-store, no-cache, must-revalidate'.
Chrome wants no-store, and IE wants must-revalidate. For other browsers (and w3c) no-cache is enough.
精彩评论