Как сохранить состояние переключения бокового меню

Question

Мне нужно отредактировать этот javascript, который управляет меню слайдера, чтобы сохранить текущее положение меню слайдера после обновления страницы

Я искал 2 десятка решений на веб-сайтах безрезультатно

Я ожидаю, что меню останется открытым или закрытым на основе текущего переключения после обновления страницы, но я не могу понять, как добавить правильный код в скрипт

    <script>
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
    document.body.style.backgroundColor = "rgb(0,0,0)";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
    document.body.style.backgroundColor = "black";
}
</script>

Answer 1

Основываясь на комментарии Куонга ле Нгока, вы можете сделать что-то вроде этого.Этот код должен запускаться при загрузке страницы:

 var key = "menuState";

    try
    {
        /*Determine if the menu was closed, or if element does not exist in localstorage*/
        var menuOpen = localStorage.getItem(key);
        if (menuOpen === null || menuOpen === 'FALSE')
        {
            closeNav();                  //Close the menu.     
        }
        else
        {
             openNav();                  //Otherwise, the menu was open. Open it.
        }

    }
    catch (ex)
    {
        console.log("Unable to access local storage to update menu state. " +ex.message);
    }

Теперь в ваших openNav() и closeNav() вы можете увидеть значение локального хранилища для элемента состояния меню.

   function openNav() {
   document.getElementById("mySidenav").style.width = "250px";
   document.body.style.backgroundColor = "rgb(0,0,0)";

   localStorage.setItem(key, 'TRUE');        //Mark menu as open.
   }

  function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.body.style.backgroundColor = "black";

    localStorage.setItem(key, 'FALSE');    //Mark menu as closed.
   }