本文详解如何修改 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";
}⚠️ 重要注意事项：
- 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 天隐藏状态，到期后自动恢复显示，兼顾用户体验与运营灵活性。
