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

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.

Answer 2

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>