使用 cookie 保存切换分区的状态

Question

虽然我发现基本上相同的问题在这里和其他网站上被问过很多次，但我已经花了好几个小时试图让这些答案在我的网站上工作，但无济于事；我只是被难住了。可能是因为我对 Javascript 还很陌生，自学成才，我这样做是为了扩大我的技能，所以我可能会遗漏其他任何人都显而易见的东西。

无论如何，在我的网站上，我有一个侧边栏的 div，我使用 jQuery 来切换它并调整父 div 以补偿它通过按钮隐藏时的缺失。我希望能够使用 cookie 以便我可以在不返回默认状态的情况下进行刷新，但我以前从未使用过 cookie，并且我可以找到有关该主题的每个教程以及我可以找到的每个答案类似的问题导致代码由于我无法弄清楚的原因而无法正常工作。

这是我网站的简化版本的JSFiddle。（尽管由于某种原因切换脚本在那里不起作用 - 它在我的网站上起作用！我在简化它时可能错过了一些东西，但我终生无法弄清楚是什么。）

HTML：

<div class="bgcontainer_center">
    <div id="sidebar">
        <p>Sidebar Content</p>
    </div>
    <div id="wrapper">
        <div id="toggle">
            <input type="button" value="Toggle Sidebar">
        </div>
        <p>Main Content</p>
    </div>
</div>

CSS：

.bgcontainer_center {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    max-width: 500px;
    background-color: #ff00ff;
    height: 100%;
}
.bgcontainer_center.clicked {
    max-width: 350px;
}
#sidebar {
    float: left;
    width: 25%;
    max-width: 125px;
    background-color: #00ff00;
    height: 100%;
    left: 0px;
}
#wrapper {
    width: auto;
    max-width: 350px;
    background-color: #0000ff;
    overflow-x: hidden;
}

和 jQuery：

$(document).ready(function () {
    $("#toggle").click(function () {
        $("#sidebar").toggle("slow");
        $(".bgcontainer_center").toggleClass('clicked');
    });
});

帮我？如果你能向我解释它以便我真正理解而不是仅仅给我有效的代码，那么奖励积分 - 我正在尝试在这里学习！如果我在编码方面做了其他愚蠢的事情，请随时告诉我。

编辑： 工作版本，调整为按预期运行：https : //jsfiddle.net/eo12xw79/3/

Answer 1

您可以使用localStorage来存储状态。

请参阅代码中的内联注释：

$(document).ready(function () {
    var sidebarVisible = localStorage.getItem('sidebar') == 'true'; // Get the value from localstorage
    $('#sidebar').toggle(sidebarVisible); // Toggle sidebar, true: show, false: hide
    $('.bgcontainer_center').toggleClass('clicked', sidebarVisible); // Add class true: add, false: don't add

    $("#toggle").on('click', function () {
        $("#sidebar").toggle("slow", function () {
            localStorage.setItem('sidebar', $('#sidebar').is(':visible')); // Save the visibility state in localstorage
        });

        $(".bgcontainer_center").toggleClass('clicked');
    });
});

演示：https : //jsfiddle.net/tusharj/eo12xw79/2/

本地存储

该localStorage属性允许您访问本地 Storage 对象。localStorage类似于sessionStorage. 唯一的区别是，虽然存储在localStorage中的数据没有过期时间，但sessionStorage在浏览会话结束时，即浏览器关闭时，存储在中的数据会被清除。

文档：https : //developer.mozilla.org/en-US/docs/Web/API/Window/localStorage