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