如何让公告横幅 Cookie 在 14 天后自动过期-js教程-PHP中文网

本文详解如何修改 javascript 代码，使公告横幅的关闭状态通过 cookie 记录，并精准设置其有效期为 14 天，避免硬编码过期时间，提升可维护性与准确性。

本文详解如何修改 javascript 代码，使公告横幅的关闭状态通过 cookie 记录，并精准设置其有效期为 14 天，避免硬编码过期时间，提升可维护性与准确性。

在实现用户关闭公告横幅（如“网站升级通知”）后不再重复显示的需求时，常借助 Cookie 存储用户偏好。但原始代码中将 Cookie 过期时间写死为 Fri, 3 Aug 2050，导致横幅一旦关闭便永久隐藏——这不符合实际运营需求（例如仅需静默 14 天）。正确做法是动态计算并设置相对过期时间。

关键在于替换硬编码的 expires 字符串，改用 JavaScript 的 Date 对象生成未来时间戳。以下是优化后的完整逻辑：

// 公告横幅关闭逻辑
const button = document.querySelector("button");
const element = document.querySelector("div");
const body = document.querySelector("body");

document.getElementById("top-site-message-hide").addEventListener("click", function() {
  element.classList.toggle("yay");
  button.classList.toggle("yay");
  body.classList.toggle("yay");

  // ✅ 动态计算 14 天后的时间（UTC 格式）
  const expiryDate = new Date();
  expiryDate.setDate(expiryDate.getDate() + 14);

  // 设置带有效期的 Cookie（注意：toUTCString() 确保时区兼容性）
  document.cookie = `cookie2=cocoMessageHide; expires=${expiryDate.toUTCString()}; path=/`;
});

// ✅ 页面加载时检查 Cookie 并隐藏横幅（若存在且未过期）
if (document.cookie.includes("cookie2=cocoMessageHide")) {
  document.getElementById("top-site-message-wrapper").style.display = "none";
  body.style.paddingTop = "0px";
}

⚠️ 重要注意事项：

NotebookLM CLI Cookies

使用 nlm CLI 检索并回答已上传至 NotebookLM 的文档问题。适用于用户需要查找信息、总结来源或查询特定笔记本时。

下载

toUTCString() 是推荐方法，它生成符合 HTTP Cookie 规范的 UTC 时间格式（如 "Wed, 12 Jun 2024 08:30:00 GMT"），比 toISOString().slice(0, -1) + 'GMT' 更简洁可靠；
document.cookie.includes(...) 比 indexOf(...) >= 0 更语义清晰、可读性强；
Cookie 的 path=/ 确保全站路径下均可读取，如需限定子路径，请按需调整；
浏览器对 Cookie 过期判断基于客户端本地时间，若用户设备时间严重偏差，可能导致提前/延迟失效——生产环境建议结合服务端时间校验（进阶方案）。

通过此改造，公告横幅将在用户点击关闭后精确保留 14 天隐藏状态，到期后自动恢复显示，兼顾用户体验与运营灵活性。