persistent content when visiting other page in (persistent toggle) jQuery

Question

When I change content of a site using toggle, or which ever other function, the state is not saved. So, if this is my page:

<div id='test'></div>
<input type='submit' value='test'>
<a href='http://www.stackoverflow.com'&gt;link to elsewhere</a>​

and this is in my ready-code:

$(':submit').click( function() {
  $('#test').text( 'this is a test' );
});

when I click the submit button the div will be filled with 'this is a test'. When I follow the link to stackoverflow and click 'back' the DIV will be empty again. How can I make the DIV persistent when clicking to another page, much like in the way <input> elements are persistent (ie. if I enter text in a <input type='text'/> and follow the link that text will still be there when I click 'back')

Eventually I want to save the state of a toggle... or should I use cookies to solve this one, which means I have to write my own toggle functionality, which is not a big problem, but I'd rather not use cookies... people are still paranoid

Answer 1

Yes, you can use cookies,a url hash ,or you can stash the state as a string in "window.name". Of course, regardless of where you store your state, you need to fetch it on load and reset the state to where it was.

One nice thing about window.name if you can stash entire pages of HTML in there, then reload them back into the DOM, previous state included. Of course other pages may be overwriting "window.name" so you need a plan B when this happens.

The "url hash" is pretty useful and can be used with AJAX as well.

Read more: http://code.google.com/web/ajaxcrawling/docs/specification.html