将 Cookie 设置为复选框状态答案

【问题标题】：Set Cookie on Check box state将 Cookie 设置为复选框状态
【发布时间】：2016-02-17 08:19:09
【问题描述】：

我正在尝试通过浏览其他帖子来找到一种方法，以便在复选框状态下设置 cookie。基本上，我在选择复选框时使用jQuery中的Toggle函数隐藏一些div。当用户转到其他页面时，他需要再次单击复选框以隐藏这些 div

jQuery(document).ready(function () {
jQuery('#checkbox').change(function () {
  jQuery('#ilan').fadeToggle();
});
});

有什么快速的方法可以将 cookie 设置为大约 1 或 2 天？补充：How to hide or display DIV based on checkbox state on different page?已经试过了

【问题讨论】：

标签： javascript jquery html cookies

【解决方案1】：

你不必为此使用cookie，你可以使用localStorage或sessionStorage：

localStorage 属性允许您访问本地 Storage 对象。 localStorage 类似于 sessionStorage。唯一的区别是，虽然localStorage 中存储的数据没有过期时间，但sessionStorage 中存储的数据会在浏览会话结束时（即浏览器关闭时）被清除。

jQuery(function ($) {
  // localStorage saves text only
  var checked = localStorage.getItem('checked') === "true"; 
  
  $('#checkbox').prop('checked', checked);
  $('#ilan').toggle(!checked);

  $('#checkbox').change(function () {
    $('#ilan').fadeToggle();
    var isChecked = $(this).is(':checked');
    localStorage.setItem('checked', isChecked);
  });
});

API：

【讨论】：

非常感谢。即使在 2021 年，这对我也有效。
@Chipsy 我很高兴它对你有用，你应该知道存储在 {Local,Session}Storage 中的所有值都被转换为字符串，例如：localStorage.setItem('a', false); console.log(localStorage.getItem('a')) // "false" (String)
代码中有一个小错误var isChecked = $(this).is(':cheched');应该是var isChecked = $(this).is(':checked');

【解决方案2】：

https://github.com/carhartl/jquery-cookie 用你的代码

$(document).ready(function () {
    $('#checkbox').change(function () {
      $('#ilan').fadeToggle();

      isilanVisible = $('#ilan').is(":visible");
      $.cookie("isilanVisible", isilanVisible, { expires : 2 });

    });

    if ($.cookie("isilanVisible") == false){
        $('#ilan').hide();
        $('#checkbox').prop('checked', true);
    }
});

【讨论】：

这不会重新选中复选框。
这将发出更改事件并触发.change(function() {...，这将使#ilan元素再次显示在.fadeToggle()中

【解决方案3】：

https://github.com/carhartl/jquery-cookie

你可以设置cookie：

$.cookie("myCookie", 123);

删除：

$.removeCookie("myCookie");

此外，要在 cookie 上设置一定天数（此处为 2）的超时时间：

$.cookie("myCookie", 123, { expires : 2 });

如果省略 expires 选项，则 cookie 成为会话 cookie，并在浏览器退出时被删除。

读取 cookie 的值：

var cookieValue = $.cookie("myCookie")

【讨论】：