使用本地存储保存菜单 state

Question

I am trying to save menu state using localstorage. i am using below jquery code to toggle my menu

    <nav id="sidebar" class="active">

    <ul class="menu">
    <li> <a href="#">Customer</a> </li>
    <li> <a href="#">Sales</a> </li>
    </ul>
    </nav>

    <div>
   <button id="sidebarCollapse"> Collapse </button>
    Right Content
    </div>

my jquery code

    <script>
    $(document).ready(function () {
        $('[data-toggle="tooltip"]').tooltip();
        $("#sidebarCollapse").on("click", function () {
            $("#sidebar").toggleClass("active");
            $(this).toggleClass("active");


        });
    });
</script>

my menu show/hide functionality is working well. but when i hide the menu and reload, menu will show again. how i save menu state using localstorage? can you help me.

Answer 1

Found a solution in this thread and applied. Hope it works.

   $('#sidebar').toggleClass(window.localStorage.toggled);


   $("#sidebarCollapse").on("click", function () {
       if (window.localStorage.toggled != "with_toggle" ) {
          $("#sidebar").toggleClass("active", true);
          $(this).toggleClass("active", true);
          window.localStorage.toggled = "with_toggle";
       } else {
          $("#sidebar").toggleClass("active", false );
          $(this).toggleClass("active", false );
          window.localStorage.toggled = "";
       }

   });