使用HTML5 localstorage在页面刷新时保留jQuery切换状态
我刚刚了解了HTML5“localstorage”function。 我一直在尝试与jQuery切换一起实现它,以便在刷新页面时使div保持在最近的状态。 这似乎是一个很好的cookie替代品! 我在理解如何以这种方式实现它时遇到了很多麻烦。 这是我到目前为止所尝试的:
HTML:
<div id="container"
我刚刚了解了HTML5“localstorage”function。 我一直在尝试与jQuery切换一起实现它,以便在刷新页面时使div保持在最近的状态。 这似乎是一个很好的cookie替代品! 我在理解如何以这种方式实现它时遇到了很多麻烦。 这是我到目前为止所尝试的:
HTML:
<div id="container"
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并尝试在本地存储,如下所示:
$(document).ready(function(){ $('#foo').click(function() { $(this).siblings().toggle(); localStorage.setItem(display, block); }); var block = localStorage.getItem(block); if(block){ $('#bar').show() } });
这是小提琴。
我在做什么绝对不行。 我在这里看到了一些类似的问题, 这是一个很好的例子。 然而,这个答案对我没有帮助,看起来非常复杂。
我只是试图了解如何在非常基本的级别使用localstorage来保存切换状态。
非常感谢任何建议或帮助。
尝试
$(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() } });
演示: 小提琴