如何使用jquery cookie插件保存toggleClass方法的狀態

Question

我知道類似的問題，我已經看過，但答案還沒有爲我工作。

所以我試圖保存JavaScript toggleClass方法的狀態，以便當用戶刷新頁面時，它會加載保存的狀態。目前它正如通常那樣恢復到原始狀態。我試圖做到這一點使用jQuery插件的cookie https://github.com/carhartl/jquery-cookie

我的代碼，隨後

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

沒有什麼不妥，沒有顯示在控制檯，所以我難倒了答案。

Answer 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: '/' }); 
    }); 
}); 

Answer 2

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

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