如何通过JavaScript将复选框状态存入Cookie，实现刷新后状态保留？

实现代码 #

你现有的HTML、CSS代码无需修改，新增如下JavaScript代码即可实现需求：

// Cookie写入方法
function setCookie(name, value, days = 30) {
  const date = new Date();
  date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
  const expires = "expires="+ date.toUTCString();
  document.cookie = name + "=" + value + ";" + expires + ";path=/";
}

// Cookie读取方法
function getCookie(name) {
  const cname = name + "=";
  const decodedCookie = decodeURIComponent(document.cookie);
  const ca = decodedCookie.split(';');
  for(let i = 0; i <ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(cname) == 0) {
      return c.substring(cname.length, c.length);
    }
  }
  return "";
}

// 页面加载完成后初始化状态+绑定事件
document.addEventListener('DOMContentLoaded', function() {
  const checkbox = document.querySelector('input[type="checkbox"]');
  // 从Cookie读取状态恢复
  const savedStatus = getCookie('checkbox_status');
  if (savedStatus === 'checked') {
    checkbox.checked = true;
  }
  // 监听状态变更存储到Cookie
  checkbox.addEventListener('change', function() {
    setCookie('checkbox_status', this.checked ? 'checked' : 'unchecked');
  });
});

可调整参数说明 #

• 你可以修改setCookie方法传入的第三个参数调整Cookie的有效时长，默认值为30天
• 如果页面存在多个复选框，可以给每个复选框添加唯一id，修改Cookie存储的key值做区分即可

内容的提问来源于stack exchange，提问作者WEI A