jquery - 使用 HTML5 本地存储在页面刷新时保留 jQuery 切换状态

Question

我刚刚了解了 HTML5 的“localstorage”功能。我一直在尝试将它与 jQuery 切换一起实现，以便在刷新页面时使 div 保持在它的最新状态。这似乎是 cookie 的绝佳替代品!我很难理解如何以这种方式实现它。到目前为止，这是我尝试过的:

HTML:

<div id="container"</div>
    <a id="foo" href="javascript:void(0);">Click Me</a>
    <div id="bar"></div>
</div>

CSS:

#container {width:200px; height:220px;}

#foo {
    display:block; float:left;
    width:200px; height:20px; 
    text-align:center;
}
#bar {
    display:none; float:left;
    height:200px; width:200px;
    background:#000000;
}

jQuery 并尝试在本地存储中学习 here :

$(document).ready(function(){
    $('#foo').click(function() {
    $(this).siblings().toggle();
    localStorage.setItem(display, block);
});
    var block = localStorage.getItem(block);
    if(block){
        $('#bar').show()
    }
});

Here是 fiddle 。

我这样做肯定是行不通的。我在 SO this 上看到了一些类似的问题是一个很好的例子。但是，这个答案对我没有帮助，而且看起来非常复杂。

我只是想了解如何在非常基本的级别上使用 localstorage 来保存切换状态。

非常感谢任何建议或帮助。

Answer 1

尝试

$(document).ready(function () {
    $('#foo').click(function () {
        $(this).siblings().toggle();
        //you need to pass string values, your variables display & block was not defined
        localStorage.setItem('display', $(this).siblings().is(':visible'));
    });
    var block = localStorage.getItem('display');
    if (block == 'true') {
        $('#bar').show()
    }
});

演示:Fiddle