使用Cookie保存Javascript切換狀態

Question

我想保存站點標題顯示的狀態。 如何使用Jquery Cookie保存它？

(function ($) {
// The initial load event will try and pull the cookie to see if the toggle is "open"
var openToggle = getCookie("show") || false;
if ( openToggle )
    div.style.display = "block";
else
    div.style.display = "none";
if ( window.location.pathname == '/' ){
    // Index (home) page
    div.style.display = "block";
}
// The click handler will decide whether the toggle should "show"/"hide" and set the cookie.
$('#Togglesite-header').click(function() {
    var closed = $("site-header").is(":hidden");
    if ( closed )
       div.style.display = "block";
    else
        div.style.display = "none";
    setCookie("show", !closed, 365 );
});

});

Answer 1

您在這里有幾個問題。 首先，您正在定義類似IIFE的函數包裝器，但是您從未調用它，因此您的代碼將無法運行。 您需要在最后添加(jQuery)以傳遞引用，或者如果您打算使用實際的document.ready事件處理程序。

其次，Cookie只存儲字符串，因此您需要將字符串轉換為布爾值（這是使用JS的數據類型的雷區），或者可以只比較字符串。 嘗試這個：

 (function($) { var $div = $(div); var openToggle = getCookie("show") == 'true'; $div.toggle(openToggle); if (window.location.pathname == '/') $div.show(); $('#Togglesite-header').click(function() { var closed = $("site-header").is(":hidden"); $div.toggle(closed); setCookie("show", !closed, 365); }); })(jQuery); 

還有兩件事要注意。 首先，我將其修改為使用jQuery。 如果您已經加載了它，則還可以利用它的簡單性來減少代碼的詳細程度。

其次，假設您的getCookie()和setCookie()函數正在運行； 您尚未顯示其實現，但是由於有許多可行的示例，我認為這不是您的問題。