JavaScript实现点击关闭触发Cookie设置元素24小时隐藏的问题排查

原代码存在的核心问题 #

• 没有做DOM节点匹配：代码里直接引用bannercloser、banner两个变量，既没有通过id选择器从页面里拿到对应的元素节点，要是脚本跑在页面元素渲染完成之前，拿不到节点的话连点击事件都绑不上，自然点了没反应
• 代码逻辑顺序错乱：把设置cookie的函数嵌在点击回调里定义就算了，函数内部的类名操作逻辑不对——就算真的执行到加disabled的步骤，后面的代码还会强制把这个类再去掉，根本藏不住元素
• 函数写完根本没调用：点击回调里只定义了callcookie这个函数，从头到尾没有一句实际执行这个函数的代码，触发点击后啥实际操作都没做，等于空转
• 漏了页面初始校验逻辑：就算点击时成功存了cookie，页面刚加载的时候也从来不会去读这个cookie判断是否要隐藏横幅，下次打开页面横幅还是会正常弹出来，完全达不到24小时内保持隐藏的效果

可直接复用的实现 #

原有HTML、CSS代码无需调整，直接替换JavaScript逻辑即可：

// 等DOM完全渲染完成后再执行逻辑，避免节点获取失败
document.addEventListener('DOMContentLoaded', function() {
  // 手动匹配对应DOM节点
  const banner = document.getElementById('mainbanner');
  const closeBtn = document.getElementById('bannercloser');
  const BANNER_COOKIE_KEY = 'announcement_banner_closed';
  const HIDE_DURATION = 1; // 隐藏时长单位为天，1天对应24小时

  // 读取指定名称的cookie值
  function getCookie(cookieName) {
    const targetPrefix = cookieName + "=";
    const allCookies = document.cookie.split(';');
    for(let cookie of allCookies) {
      // 清除cookie字符串前后的空格
      while(cookie.charAt(0) === ' ') cookie = cookie.substring(1);
      if(cookie.indexOf(targetPrefix) !== -1) {
        return cookie.substring(targetPrefix.length, cookie.length);
      }
    }
    return null;
  }

  // 页面初始化：如果cookie记录用户已关闭横幅，直接隐藏
  if(getCookie(BANNER_COOKIE_KEY)) {
    banner.classList.add('disabled');
  }

  // 给关闭按钮绑定点击事件
  closeBtn.addEventListener('click', function() {
    // 计算24小时后的过期时间
    const expireTime = new Date();
    expireTime.setTime(expireTime.getTime() + (HIDE_DURATION * 24 * 60 * 60 * 1000));
    // 写入全站生效的带过期时间的cookie
    document.cookie = `${BANNER_COOKIE_KEY}=true; expires=${expireTime.toGMTString()}; path=/`;
    // 立即隐藏横幅
    banner.classList.add('disabled');
  })
})

实际运行效果 #

• 点击关闭按钮的瞬间，横幅立即触发隐藏
• 同时生成有效期24小时的站点级Cookie，Cookie有效期内用户刷新、跳转页面时，横幅都会保持隐藏状态
• 24小时后Cookie自动失效，横幅会重新恢复显示

内容的提问来源于stack exchange，提问作者jozo Jozo