使用JQuery保持菜单的切换状态 [英] keep toggle state of menu using JQuery

问题描述

我的菜单具有此HTML切换按钮:

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

我从开始:

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

    });
});

但我不确定要使用什么来保持状态

but im not sure what to use to keep the state

推荐答案

就像人们所说的那样，您可以使用html 5网络存储.

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

您有2种类型:
-localStorage-存储没有到期日期的数据
-sessionStorage-存储一个会话的数据

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

设置方法:
localStorage.setItem("name"，"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
   }
}

此处有更多信息

这篇关于使用JQuery保持菜单的切换状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！