Javascript 用于保存导航栏状态的localStorage

我想使用localStorage存储侧边栏切换，以便浏览器能够记住最后一次切换。有人能看一下这个代码并告诉我为什么它不工作吗

$(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

问题：1）您没有为键“侧栏”设置localStorage，但访问将导致意外值

var sidebarshow = localStorage.getItem('sidebar') == 'true';

问题：2）您正在为键“sidebarshow”设置本地存储，但在任何地方都没有使用。（至少在上述代码中）

将localStorage视为一个刚好的对象，其键和值的类型为string。确保先设置值，然后再获取它们

下面是示例代码

$（文档）.ready（函数（）{
/*
if（window&&window.localStorage.getItem（'sidebar'）='active'）{
//如果它处于活动状态，则显示为活动状态
$（“#侧栏”）.addClass（“活动”）；
}否则{
$（“#侧栏”）.removeClass（“活动”）；
} */
$（“#切换”）。单击（函数（）{
$（“#边栏”）.toggleClass（“活动”）；
var更新=“”；
if（window.localStorage.getItem（'sidebar'）=='active'）{
更新='未激活'；
}否则{
更新='活动'；
}
window.localStorage.setItem（'sidebar'，已更新）；
}); 
});
#侧边栏.active{
位置：固定；
排名：0；
左：0；
背景#1F6482；
宽度：250px；
身高：100%；
颜色：#FFF；
}
#边栏{
位置：固定；
排名：0；
左：0；
背景#1F6482；
宽度：75px；
身高：100%；
颜色：#FFF；
}
#拨动{
左边距：400px；
}

这里是侧边栏
切换
如果您正在使用Admin LTE v-3软件包作为前端，并且希望保存边栏折叠状态，请使用此技术。。。。。。。。上述解决方案也在起作用。。。
只需仔细阅读并执行一个动作

html标签
汉堡按钮

<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>




$（文档）.ready（函数（）{
/*
检查条件本地存储器中存储了什么值如果没有，则为默认值
侧边栏操作将被执行，您不必担心这一点。
在管理lte版本3中，在body标签中添加了侧边栏折叠检查浏览器并检查
*/
if（window.localStorage.getItem（'sidebar-toggle-collapsed'）='false'）{
//如果关闭侧边栏，则折叠关闭
$（“body”）.addClass（“边栏折叠”）；
}否则{
$（“body”）.removeClass（“侧边栏折叠”）；
}
//执行单击事件操作
$（“[data widget='pushmenu']”）。单击（函数（）{
var buttonClickedValue=''；
if（window.localStorage.getItem（'sidebar-toggle-collapsed'）='false'）{
buttonClickedValue='true'；
}否则{
buttonClickedValue='false'；
}
//在本地存储中存储值
window.localStorage.setItem（'sidebar-toggle-collapsed'，buttonClickedValue）；
});
});
看看你的代码，很抱歉，我对这个不太熟悉，我正在努力学习。我正在尝试检查侧边栏的state的本地存储，以便它可以显示它。然后，单击切换以更改侧栏宽度，并将其保存在localstorage中。感谢您提供的任何帮助。
边栏是什么？您没有在else条件下设置
localStorage
。请运行这个程序，告诉我们什么不起作用以及预期的结果。边栏是指定给localstorage的名称，用于存储。另外，当我单击切换按钮时，它会从正常状态切换到活动状态（css宽度从75px变为250px），但不会将状态存储在localstorage中。当我刷新页面时，它会恢复正常。创建fiddle并共享代码链接感谢您的回复，但是您是否可以发布一个示例来说明这是如何显示的？谢谢。@SoulTech，np！检查更新的答案和示例代码。希望这有帮助。错误：{“message”：“Uncaught SecurityError:未能从“窗口”读取“localStorage”属性：文档是沙盒，并且缺少“允许相同来源”标志。“filename”：“，“lineno”：40，“colno”：10}这是我运行代码时得到的结果。我也厌倦了我的系统，它是显示，因为我希望它，但它仍然恢复正常。它没有存储所单击的切换的状态。@SoulTech，该错误是由于沙盒环境造成的。请在chrome调试浏览器的测试结束时检查我的更新答案。我已经稍微修改了这个功能，可以在控制台中工作。谢谢，我真的很感谢你的帮助。最后一件事，我如何检查页面何时加载以首先检查localStorage，它是否处于活动状态，因此它会根据保存在localStorage中的内容显示。
localStorage.setItem('sidebarshow', 'active');

<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>