Saving locally javascript changes

Question

Im trying to figure out if it's possible and how I could save changes made to a page using javascript to a browser.

For example: I have a toggle which hides a menu. So I hide my menu and leave the page. When I visit this page again, I want that menu to remain hidden. As of now, any changes I make using Javascript disappear once I leave the session or refresh

Answer 1

Not like you are thinking, no. There is no "remember this page state" flag or anything.

However, there is a way to store data. On modern browsers, you can use localStorage to persist some choice or data the user makes. Then when the page is loaded, your javascript can read that data and then configure the page around.

For example:

$('#hide-stuff-button').click(function() {
  $('#stuff').hide();
  localStorage.hidden = true;
});

if (localStorage.hidden) {
  $('#stuff').hide();
}

That script does 2 things. It saves some preference when you click a button, and when the page loads, it reads the saved state and does something to the page.