如何用JavaScript与Cookie实现带复选框的弹窗永久隐藏？

我来帮你搞定这个需求，咱们直接在现有代码基础上修改，核心就是设置Cookie记录同意状态，再在页面加载时检查Cookie决定是否隐藏弹窗，具体操作如下：

1. 完善Cookie设置逻辑 #

当用户勾选「存入Cookie」的复选框时，我们需要创建一个Cookie标记用户已同意，还要设置合理的过期时间（比如30天）避免Cookie失效。把这部分代码填到你注释的位置就行：

// cookie set
if (document.getElementById("checkCookies").checked) {
  // 设置Cookie：名称为hasAcceptedPolicy，值为true，30天后过期，根目录生效
  const expiryDate = new Date();
  expiryDate.setTime(expiryDate.getTime() + (30 * 24 * 60 * 60 * 1000));
  document.cookie = `hasAcceptedPolicy=true; expires=${expiryDate.toUTCString()}; path=/`;
}

2. 页面加载时自动检查Cookie #

页面一打开就要判断用户是否已经通过Cookie同意过，如果是，直接隐藏弹窗不用再显示。把这部分逻辑放在jQuery初始化代码的最开头：

$(function() {
  // 页面加载时先检查Cookie
  const hasAccepted = document.cookie.includes('hasAcceptedPolicy=true');
  if (hasAccepted) {
    wrapper.style.display = "none";
  }

  // 原来的提交按钮点击逻辑
  $('#submitbtn').on('click', function() {
    if (document.getElementById("checkSocialwall").checked) {
      wrapper.style.display = "none";
      // cookie set
      if (document.getElementById("checkCookies").checked) {
        const expiryDate = new Date();
        expiryDate.setTime(expiryDate.getTime() + (30 * 24 * 60 * 60 * 1000));
        document.cookie = `hasAcceptedPolicy=true; expires=${expiryDate.toUTCString()}; path=/`;
      }
    } else {
      document.getElementById("errormsg").style.display = "block";
    }
  })
});

关键逻辑说明 #

• Cookie设置：通过document.cookie创建Cookie，指定过期时间和根路径，确保整个网站都能读取到这个状态
• 页面加载检查：用document.cookie.includes()快速判断是否存在同意标记，存在则直接隐藏弹窗容器wrapper
• 逻辑联动：用户同意后既隐藏当前弹窗，又记录状态，下次打开页面就不会再弹出了

这样修改后，只要用户勾选两个复选框提交，后续访问页面时弹窗就会自动隐藏啦～

内容的提问来源于stack exchange，提问作者Lukas Kollin