Modified Divs do not retain their values on back button

I have a 开发者_如何学编程form and some divs that I modify using jquery.

On form submit, the user is taken to another page.

Now, when the user presses back button, the modified divs are not retained. Only form values are retained.

What is the best way to retain the modified divs? Or atleast there should be some event that I can capture on back button so that I can re-modify those divs.

Thanks.

As an amendment to Paul's answer: You of course only need to track the state like that, if you would lose user input, for example because you added input elements that aren't there anymore after going back.

If you can reconstruct the DOM state with just the user data in the "static" input elements in your HTML, then you "just" need to additionally trigger your functions "onload" (or in DOM ready).

Say, for example, you show/hide a div depending on a checkbox:

<input type="checkbox" id="myCheckBox" onclick="showHideMyDiv(this)">
<div id="myDiv"> ... </div>

Then you add the call of the event handler (showHideMyDiv) to a window.onload handler (don't actually use window.onload - this is just an example, but use addEventListener/attachEvent or a framework such as jQuery).

 window.onload = function() {
   showHideMyDiv(document.getElementbyId("myCheckBox"));
 }

This will work, independently on how the user got there, either the first time, or with the back button.

A simple way to achieve this is to track the state of the page in the URL. You can do this with javascript, or using something like this jquery history plugin:

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

Then, when the page loads (first time or when the back button is hit) you can set the state of the page based on the querystring values.