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

我刚刚了解了HTML5“localstorage”功能.我一直在尝试与jQuery切换一起实现它,以便在刷新页面时使div保持在最新状态.这似乎是一个很好的cookie替代品！我在理解如何以这种方式实现它时遇到了很多麻烦.这是我到目前为止所尝试的：

HTML：

Click Me

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来保存切换状态.

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