修改Cookie同意横幅：用JS控制指定DIV的显示与隐藏

核心逻辑 #

直接通过JavaScript读取CookieClick Cookie的值，控制目标DOM元素（class为cookie-popup或id为nb-popup）的display属性：

• 当Cookie值为"True"时，设置display: none隐藏横幅
• 当Cookie值为空或为"False"时，设置display: block显示横幅

完整代码实现 #

1. Cookie读取工具函数 #

先封装一个通用的Cookie读取函数，方便获取指定Cookie的值：

function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

2. 横幅显示控制逻辑 #

页面加载完成后执行以下逻辑，同时绑定“接受”按钮的点击事件：

document.addEventListener('DOMContentLoaded', function() {
  // 获取目标横幅元素（优先用id，其次用class，可根据实际情况调整优先级）
  const cookiePopup = document.getElementById('nb-popup') || document.querySelector('.cookie-popup');
  if (!cookiePopup) return; // 找不到目标元素时直接退出

  // 获取CookieClick的当前值
  const cookieValue = getCookie('CookieClick');

  // 根据Cookie值设置横幅显示状态
  if (cookieValue === 'True') {
    cookiePopup.style.display = 'none';
  } else {
    cookiePopup.style.display = 'block';
  }

  // 绑定“接受”按钮的点击事件（假设按钮class为cookie-accept，可根据实际修改）
  const acceptBtn = cookiePopup.querySelector('.cookie-accept');
  if (acceptBtn) {
    acceptBtn.addEventListener('click', function() {
      // 设置CookieClick为True，测试有效期设为1天，正式环境自行调整参数
      document.cookie = 'CookieClick=True; max-age=86400; path=/';
      cookiePopup.style.display = 'none';
    });
  }
});

3. 注意事项 #

• 建议给横幅元素默认设置CSS样式display: none，避免页面加载时的闪烁问题，由JS控制显示时机
• CMS生成的退出追踪表单无需修改，只要其提交逻辑不干扰CookieClick的读取和设置即可
• 正式环境调整Cookie有效期时，修改max-age的值（单位为秒），或使用expires设置具体过期时间

内容的提问来源于stack exchange，提问作者Vincent Destil