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的

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

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

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

1 个答案: