Saving State Of Treeview Menu In Browser Storage

I've got an html page that is built up using javascript. Now I want the page to 'remember' which treeview has been opened. When the menu is closed the class 'testclosed' is added t

Solution 1:

It's hard to make a relevant example without seeing your code. You can use the localStorage api to store the class name of the opened menu, then check it once you load the page:

// Call this when you open and close a menu
function saveSettings(openMenuClassName) {
    // Store value in localStorage
    localStorage.setItem('openMenu', openMenuClassName)
}

function loadSettings () {
   // Get value from localStorage
   var openMenu = localStorage.getItem('openMenu');
   if (openMenu) $(openMenu).show();
}

// Check for the saved setting on page ready
$(document).ready(loadSettings);

Read more about localStorage here.

Solution 2:

Sinan had the right idea and set me on the right track. This is the answer I eventually came up with.

The "testclosed" class is added when the item is closed. This was already the case as in the question.

What I've done in the save() function below is set the localStorage to true if the class is found.

In the load() function I then get the localStorage item and if it is set to true, the class "testclosed" is removed.

$(document).ready(load);



function save() {
   var saveDiv = document.getElementsByClassName("testclosed"); 
   if (saveDiv) {

      localStorage.setItem("isMenuOpen", true);

   }

}

function load() {
   var isMenuOpen = localStorage.getItem("isMenuOpen");
   if (isMenuOpen) {

      $(".testitem").removeClass("testclosed");

   }

}