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

Answer 2

Use a hidden field. Use JS to set this hidden field value whenever the panel is opened or closed, and to check the hidden field on pageload. Example-

In your JS, I use one function to set which panels are open/closed and a 2nd to arrange them. This example is based on having multiple panels on your page but you can quickly change it to handle just one panel if needed.

function init() {
    if ($("#hdnOpenPanels").val()) {
        $(".fixPanels").click();
    }
}
// Ensures that the correct panels are open on postback
$(".checkPanels").click(function () {
    var checkPanel1= $("#Panel1").hasClass("in");
    var checkPanel2 = $("#Panel2").hasClass("in");
    var checkPanel3 = $("#Panel3").hasClass("in");

    $("#hdnOpenPanels").val(checkPanel1 + "|" + checkPanel2 + "|" + checkPanel3);
});

$(".fixPanels").click(function () {
    if ($("#hdnOpenPanels").val().split('|')[0] === "true") {
        $("#Panel1").collapse('show');
    } else {
        $("#Panel1").collapse('hide');
    }

    if ($("#hdnOpenPanels").val().split('|')[1] === "true") {
        $("#Panel2").collapse('show');
    } else {
        $("#Panel2").collapse('hide');
    }

    if ($("#hdnOpenPanels").val().split('|')[2] === "true") {
        $("#Panel3").collapse('show');
    } else {
        $("#Panel3").collapse('hide');
    }
});

Now you have two easy classes available to add to any items that will require the page to know which panels are open (.checkPanels) and also to "fix" which panels should be open (.fixPanels). If you have modals on the page they'll need to "fixPanels" when they closed (even though there may not have been a postback).

On your code-behind:

Add this to your PageLoad:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (Session["sPanels"] != null)
        {
            hdnOpenPanels.Value = Session["sPanels"].ToString();
            Session.Remove("sPanels");
        }

        if (IsPostBack){...}
        else {...}
    }

Finally, on any code-behind functions that will be causing a post-back affecting the panels, add this line at the bottom of the function(s):

Session["sPanels"] = hdnOpenPanels.Value;