Как сохранить боковую панель свернутой даже после перенаправления на другую страницу

Question

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

Как сохранить его свернутым даже после перенаправления?

Проверьте мой код здесь: https://jsfiddle.net/jgh2cnsa/

$(document).ready(function(){
    $('.hamburger').on('click',function(){
        $('#side-bar').toggleClass("side-bar-toggle");
        $('.menu-container ul').toggleClass('menu-container-toggle');
        $('.side-text').toggleClass('side-text-toggle');
        $('.fa-angle-right').toggleClass('fa-angle-right-toggle');
        $('.menu-container ul li a').toggleClass('menu-container-ul-ul-i-a-toggle');
        $('#right-section').toggleClass('right-section-toggle');
        $('#nav').toggleClass('nav-toggle');
        $('.container').toggleClass('container-toggle');
    });
});

Результат вы можете увидеть здесь: - https://jsfiddle.net/jgh2cnsa/

Answer 1

Вот пример сохранения состояния в sessionStorage:

  $(document).ready(function(){
      let collapsed = sessionStorage.getItem('collapsed');
      const setCollapsedState = ( )=> {
      console.log(collapsed);
          if(collapsed === "open"){
              $('#side-bar').addClass("side-bar-toggle");
              $('.menu-container ul').addClass('menu-container-toggle');
              $('.side-text').addClass('side-text-toggle');
              $('.fa-angle-right').addClass('fa-angle-right-toggle');
              $('.menu-container ul li a').addClass('menu-container-ul-ul-i-a-toggle');
              $('#right-section').addClass('right-section-toggle');
              $('#nav').addClass('nav-toggle');
              $('.container').addClass('container-toggle');
          } else {
              $('#side-bar').removeClass("side-bar-toggle");
              $('.menu-container ul').removeClass('menu-container-toggle');
              $('.side-text').removeClass('side-text-toggle');
              $('.fa-angle-right').removeClass('fa-angle-right-toggle');
              $('.menu-container ul li a').removeClass('menu-container-ul-ul-i-a-toggle');
              $('#right-section').removeClass('right-section-toggle');
              $('#nav').removeClass('nav-toggle');
              $('.container').removeClass('container-toggle');
          }
      }

      setCollapsedState( );
      $('.hamburger').on('click',function(){
            console.log(collapsed);
          sessionStorage.setItem('collapsed', (collapsed==="open"?"closed":"open"));
          collapsed = sessionStorage.getItem('collapsed');
          console.log(collapsed);
          $('#side-bar').toggleClass("side-bar-toggle");
          $('.menu-container ul').toggleClass('menu-container-toggle');
          $('.side-text').toggleClass('side-text-toggle');
          $('.fa-angle-right').toggleClass('fa-angle-right-toggle');
          $('.menu-container ul li a').toggleClass('menu-container-ul-ul-i-a-toggle');
          $('#right-section').toggleClass('right-section-toggle');
          $('#nav').toggleClass('nav-toggle');
          $('.container').toggleClass('container-toggle');
      });
  });

Надеюсь, это демонстрирует идею, так как она применима к любому методу хранения.