如何使用 jquery cookie 插件保存 toggleClass 方法的状态答案

【问题标题】：How to save state of toggleClass method using jquery cookie plugin如何使用 jquery cookie 插件保存 toggleClass 方法的状态
【发布时间】：2015-02-10 22:14:29
【问题描述】：

我知道我看过类似的问题，但答案还没有为我工作。

所以我试图保存 JavaScript toggleClass 方法的状态，以便在用户刷新页面时加载保存的状态。目前它只是像往常一样恢复到原始状态。我正在尝试使用 jquery cookie 插件 https://github.com/carhartl/jquery-cookie

我的代码如下

 $(document).ready(function(){
   $(".steps").click(function(){
   $(this).toggleClass("selected");
   $.cookie("selected", $(this).hasClass("selected"));
  });
});

控制台中没有出现任何问题，所以我很难回答。

【问题讨论】：

那么代码设置了 cookie，你在哪里读回并切换？
我没有，我试过放置 $.cookie("selected");紧接着，但它仍然没有保存。我在正确的地方读取 cookie 吗？

标签： javascript jquery cookies

【解决方案1】：

确保设置了布尔值。您存储一个字符串但需要一个布尔值

JSFIDDLE

$(document).ready(function(){
   var sel = $.cookie("selected"); // get the cookie
   sel = sel=="true"; // convert to boolean - null is false, "false" is false
   $(".steps").toggleClass("selected",sel); // initial
   $(".steps").on("click",function() {
     var $this = $(this);
     sel = !sel; // toggle
     $this.toggleClass("selected",sel); // toggles
     $.cookie("selected", sel,{ expires: 7, path: '/' });
  });
});

【讨论】：

有趣，你是对的，它做的恰恰相反，它似乎在加载页面时自动将状态切换为“选择”。
似乎仍然在做同样的事情
更新为从 cookie 中获取布尔值

【解决方案2】：

$(document).ready(function(){
if($.cookie("selected")){
    $(".steps").addClass("selected");
} 

   $(".steps").click(function(){
   $(this).toggleClass("selected");
   $.cookie("selected", $(this).hasClass("selected"));
  });
});

【讨论】：

这似乎也会在加载页面时自动将状态切换为“已选择”。状态改变也没有保存。