localStorage 保存导航栏状态答案

【问题标题】：localStorage to save navbar statelocalStorage 保存导航栏状态
【发布时间】：2020-04-17 14:54:57
【问题描述】：

我想使用 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

#sidebar.active {
    position: fixed;
    top: 0;
    left: 0;
    background: #1F6482;
    width: 250px;
    height: 100%;
    color: #FFF;
}
#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    background: #1F6482;
    width: 75px;
    height: 100%;
    color: #FFF;
}

【问题讨论】：

看看你的代码？
对不起，我对这个不太熟悉，我正在努力学习。我试图检查侧边栏状态的本地存储，以便它可以显示它。然后是单击切换以更改侧边栏宽度并将其保存在本地存储中。我们将不胜感激您提供的任何帮助。
什么是sidebar？您没有在 else 条件下设置 localStorage。请运行它并告诉我们究竟是什么不工作以及预期的结果。
Sidebar 是本地存储的名称。此外，当我单击切换按钮时，它会从正常状态切换到活动状态（css 宽度从宽度 75px 变为 250px），但它不会将状态存储在 localstorage 中。当我刷新页面时它会恢复正常。
创建小提琴并分享您的代码链接

标签： javascript jquery css local-storage

【解决方案1】：

问题：1）你没有为键'sidebar'设置localStorage，但是访问会导致意外的值。

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

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

localStorage.setItem('sidebarshow', 'active');

将 localStorage 视为一个对象，其键和值都是字符串类型。确保先设置值，然后再获取它们。

这是工作示例代码。

$(document).ready(function() {

    /*
    if (window && window.localStorage.getItem('sidebar') === 'active') {
        // if it active show it as active
        $("#sidebar").addClass("active");
    } else {
        $("#sidebar").removeClass("active");
    } */
    
    $("#toggle").click(function() {
         $("#sidebar").toggleClass("active");
         var updated = '';
         if (window.localStorage.getItem('sidebar') === 'active') {
             updated = 'not_active';
         } else {
             updated = 'active';
         }
         window.localStorage.setItem('sidebar', updated);
    }); 
});

#sidebar.active {
    position: fixed;
    top: 0;
    left: 0;
    background: #1F6482;
    width: 250px;
    height: 100%;
    color: #FFF;
}
#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    background: #1F6482;
    width: 75px;
    height: 100%;
    color: #FFF;
}

#toggle {
    margin-left: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sidebar"> Sidebar here </div>

<button id="toggle"> toggle </button>

请检查 chrome 调试控制台示例的屏幕截图，稍作更改以进行测试。

【讨论】：

感谢您的回复，但是如果您可以发布一个示例来说明这显示的外观，是否可以？谢谢。
@SoulTech，np！检查更新的答案和示例代码。希望这会有所帮助。
Error:{ "message": "Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': 该文档已被沙盒化并且缺少 'allow-same-origin' 标志。", "filename": "stacksnippets.net/js", "lineno": 40, "colno": 10 } 这就是我运行代码时得到的结果。我也在我的系统中厌倦了它，它按我想要的方式显示，但它仍然恢复正常。它没有存储被点击的切换状态。
@SoulTech，由于沙盒环境导致的错误。请最后检查我更新的答案以在 chrome 调试浏览器中进行测试。我稍微修改了该功能以在控制台中工作。
谢谢，非常感谢您的帮助。最后一件事，我如何检查页面何时加载以首先检查 localStorage，它是否处于活动状态，以便根据保存在 localStorage 中的内容显示。

【解决方案2】：

如果您在前端使用 Admin-LTE v-3 包并希望保存侧边栏折叠的状态，请使用此技术........ 并且上述解决方案也有效.. . https://stackoverflow.com/a/59504461/8455396 只需仔细阅读并执行操作即可。

html 标签 hamburger button

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

【讨论】：