localStorage to save navbar state

Question

I want to use localStorage to store the sidebar toggle so browser can remember the last toggle. Can someone please take a look at this code and tell me why it's not working?

$(document).ready(function() {
    var sidebarshow = localStorage.getItem('sidebar') == 'true';
    $('#sidebar').toggleClass('active', sidebar);

    $("#toggle").click(function() {
         $("#sidebar").toggleClass("slow",function() {
             localStorage.setItem('sidebarshow', 'active');
         });
         $("#sidebar").toggleClass("active");
    }); 
}); 

CSS

#sidebar.active {
    position: fixed;
    top: 0;
    left: 0;
    background: #1F6482;
    width: 250px;
    height: 100%;
    color: #FFF;
}
#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    background: #1F6482;
    width: 75px;
    height: 100%;
    color: #FFF;
}

Answer 1

If you're using the Admin-LTE v-3 package for front-end and wants to save the state of sidebar-collapse use this technique........ and an above solution is also working... https://stackoverflow.com/a/59504461/8455396 Just read carefully and perform an action.

html tag hamburger button

<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>

<script>
$(document).ready(function() {
 /*
  check condition what value is stored in local storage if nothing then default 
  sidebar action would be performed you don't have to worry about this.
  In Admin lte version 3 sidebar-collapse added in body tag inspect you browser and check
 */
 if (window.localStorage.getItem('sidebar-toggle-collapsed') === 'false') {
        // if it is off sidebar-collapse close
        $("body").addClass("sidebar-collapse");
    } else {
        $("body").removeClass("sidebar-collapse");
 }

// Perform click event action

 $("[data-widget='pushmenu']").click(function() {
        var buttonClickedValue = '';
        if (window.localStorage.getItem('sidebar-toggle-collapsed') === 'false') {
            buttonClickedValue = 'true';
        } else {
            buttonClickedValue = 'false';
        }
       
        // store value in local storage
        window.localStorage.setItem('sidebar-toggle-collapsed', buttonClickedValue );
  });

});
</script>

Answer 2

Problem: 1) you did not set the localStorage for key 'sidebar', But accessing will result into unexpected values.

var sidebarshow = localStorage.getItem('sidebar') == 'true';

Problem: 2) you are setting the localStorage for key 'sidebarshow', But you are not used any where. (at least in above code)

localStorage.setItem('sidebarshow', 'active');

Think of localStorage as a just object with key and values are of type string. Make sure to set the value first and get them later.

Here is sample code working.

$(document).ready(function() {

    /*
    if (window && window.localStorage.getItem('sidebar') === 'active') {
        // if it active show it as active
        $("#sidebar").addClass("active");
    } else {
        $("#sidebar").removeClass("active");
    } */
    
    $("#toggle").click(function() {
         $("#sidebar").toggleClass("active");
         var updated = '';
         if (window.localStorage.getItem('sidebar') === 'active') {
             updated = 'not_active';
         } else {
             updated = 'active';
         }
         window.localStorage.setItem('sidebar', updated);
    }); 
});

#sidebar.active {
    position: fixed;
    top: 0;
    left: 0;
    background: #1F6482;
    width: 250px;
    height: 100%;
    color: #FFF;
}
#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    background: #1F6482;
    width: 75px;
    height: 100%;
    color: #FFF;
}

#toggle {
    margin-left: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sidebar"> Sidebar here </div>

<button id="toggle"> toggle </button>

Please check the screenshot of chrome debug console example with slightly changed to test.