keep toggle state of menu using JQuery

Question

I have this HTML toggle button for my menu:

<a href="#" id="toggle_nav" class="sidebar-toggle" data-toggle="offcanvas" role="button">

How can i save the toggle state to reload it on page load

I have started off with:

$(document).ready(function() {
    $("#toggle_nav").toggle(function() {

    });
});

but im not sure what to use to keep the state

Answer 1

Like people are saying in the commends you can use html 5 web storage.

You have 2 types:
- localStorage - stores data with no expiration date
- sessionStorage - stores data for one session

how to set:
localStorage.setItem("name", "value");

How to get the value
localStorage.getItem("name");

So now can you do a simple check like:

if (localStorage.getItem("toggle") === null) {
    //hide or show menu by default
    //do not forget to set a htlm5 cookie
}else{
   if(localStorage.getItem("toggle") == "yes"){
     //code when menu is visible
   }else{
     //code when menu is hidden
   }
}

More information here