keep state of collapse and expand after page reload

Question

Inside an aspx page, there are five fieldset elements. Inside each fieldset next to the legend element, you can find a table element containing many rows. I have added toggle functionality to each legend element so that when you click the legend element the corresponding table collapses or expands. the problem is when you reload the page all tables are expanded. I want to keep the status of each table when the page is reloaded. appreciate any kind of advice.

Answer 1

There are multiple solutions to this answer, such as sending a request to the server to save your state of tables, and redirect this back to the client whenever reloaded. My knowledge of aspx pages are non-existent, so I'm coming up with a different answer.

HTML5 WebStorage

You could use the HTML5 Web Storage, some info can be found here: http://www.w3schools.com/html/html5_webstorage.asp

An example would be to store it with javascript every time you expand or collapse a table as so:

// Setting into the local storage
localStorage.setItem("table_"+tableElement.attr('id'), "collapsed");
// Getting from the local storage
localStorage.getItem("table_"+tableElement.attr('id'));

Please do note that the browser which this javascript is being ran on, has to support HTML5 and that when the user reloads this page on another browser, it will be set as if the user has first seen the page.