Javascript menu remembering position

Question

Hi,

I am currently working on a JS menu for a web app. It consists of two bars, the fixed main one and the submenu which is activated (display:block from display:none) by Javascript function. The selected options of the main menu as well as the submenu are also highlighted by adding a class="main_on" and class="sub_on" by onclick event. Is there way of remembering which submenu was displayed and which options were currently classed as active when the user hits F5 or the page reloads itself? I am looking for a non-cookie and non-database approach if possible.

Thanks,

Mike

Answer 1

You can make the link/element that is clicked (for the onclick event) set the URL hash in the address bar. (i.e. http://server.name/page#URLhash) If it's a link you just have to adjust the HREF property, otherwise you may have to manipulate with window.location.

This sets the current state. When the page (re)loads, check the value of the URL hash. See http://developer.mozilla.org/en/DOM/window.location for details on how to access it. Provided the URL hash is still in the address bar, you'll be able to get the value.

Then use the value to determine which menu to make active. Thus you can restore the state this way.

There are some differences between browsers. Do a search on "Ajax History", in which some people have used the URL hash to preserve the state after Ajax actions. Not the exact same problem you are trying to solve but similar. Check out RSH: http://code.google.com/p/reallysimplehistory/

The same ideas will be used.