Keep menu toggle state after page reload

Question

Here's a toggle menu who works perfectly: If I click on the link (HTML code below), the menu folds. But I want if the users reload the page to keep the state of menu (expand / collapse).

  $('#menu_toggle').click(function () { if ($('body').hasClass('nav-md')) { $('body').removeClass('nav-md'); $('body').addClass('nav-sm'); $('.left_col').removeClass('scroll-view'); $('.left_col').removeAttr('style'); $('.sidebar-footer').hide(); if ($('#sidebar-menu li').hasClass('active')) { $('#sidebar-menu li.active').addClass('active-sm'); $('#sidebar-menu li.active').removeClass('active'); } } else { $('body').removeClass('nav-sm'); $('body').addClass('nav-md'); $('.sidebar-footer').show(); if ($('#sidebar-menu li').hasClass('active-sm')) { $('#sidebar-menu li.active-sm').addClass('active'); $('#sidebar-menu li.active-sm').removeClass('active-sm'); } } }); 

 <a id="menu_toggle"><i class="fa fa-bars"></i></a> 

How to remember the state? Full project: http://demo.kimlabs.com/gentelella/production/index.html Thanks

Answer 1

You should use cookies to store booleans, of if the menu has been opened or closed. Then when a page is loaded, it checks for any stored cookies, and by default uses those variables.

For example:

on page load:

var menuOutBoolean = Cookies.get("menuOutB") || false;
if (menuOutBoolean == true || menuOutBoolean == "true"){
    //put the menu out
}
else {
    //put menu in
}

On change:

if (/*out*/){
    Cookies.set("menuOutB","true");
}
else{
    Cookies.set("menuOutB","false");
}

Note: Here I have used this JavaScript API (Jquery Plugin) .

Answer 2

This is the sort of thing I'd use localStorage for. Just set some kind of flag in localStorage when the state changes and fetch it when your page loads.

I should add that using css classes to represent view state isn't a good idea and will bite you if your UI gets much more complicated.