使用 cookie 保存 Javascript 切换状态

Question

我想保存 site-header 显示的状态。我如何使用 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() 函数正常工作；你没有展示它们的实现，但是因为有 lots 的工作示例，我认为这不是你的问题。

使用 cookie 保存 Javascript 切换状态

Save Javascript toggle state with cookie

javascript

jquery

jquery-cookie