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是小提琴。

我在做什么绝对不行。我在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

使用HTML5 localstorage在页面刷新时保留jQuery切换状态

1 个答案: