使用 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/

本地存储

The localStorage property allows you to access a local Storage object. localStorage is similar to sessionStorage. The only difference is that, while data stored in localStorage has no expiration time, data stored in sessionStorage gets cleared when the browsing session ends - that is when the browser is closed.

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

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

Using a cookie to save the state of a toggled division

jquery

cookies

toggle