使用jQuery Cookie保存切换状态

Question

我想保存根据用户选择的状态切换的状态。

我的代码如下：

<div id="wrapper">
  stuff here
</div>

<script>
   $("#menu-toggle").click(function(e) {
      e.preventDefault();
      $("#wrapper").toggleClass("toggled");
   });
</script>

如果我将类切换设置为ID包装器，则默认情况下切换div。

如何使用Cookie解决此问题？ 因此，它可以记录用户单击的内容，因此可以在重新加载页面时将div Auguster设置为已切换或未切换。

Answer 1

我不确定cookie是不是最好的选择。 也许localStorate是一个更可行，更容易的选择。

您可以像这样使用它：

$("#menu-toggle").click(function(e) {
   e.preventDefault();
   var element = $("#wrapper");
   element.toggleClass("toggled");
   if (element.hasClass("toggled")) {
     localStorage.setItem('toggled', 'true');
   } else {
     localStorage.setItem('toggled', 'false');
   }

 });

 // On load
 var element = $("#wrapper");
 var toggled = localStorage.getItem('toggled');;
 element.toggleClass("toggled");

 if (toggled == "true")
   element.addClass("toggled");
 else
   element.removeClass("toggled");

JSFiddle： https ：//jsfiddle.net/8tpxx71z/

更多信息： https : //developer.mozilla.org/zh-CN/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API