如何设置公告横幅Cookie在14天后自动过期？

我希望让我的公告横幅在14天后过期，请问需要如何修改以下代码来实现该功能？

原代码：

//  Announcement Banner
var button = document.querySelector("button");
var element = document.querySelector("div");
var 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");
    document.cookie =
    "cookie2=cocoMessageHide; expires=Fri, 3 Aug 2050 20:47:11 UTC; path=/";
});

if (document.cookie.indexOf("cookie2=") >= 0) {
    document.getElementById("top-site-message-wrapper").style.display = "none";
    body.style.paddingTop = "0px";
}

我尝试过多种解决方案，认为需要替换以下代码行，但我在JavaScript和jQuery方面经验尚浅：

document.cookie =
"cookie2=cocoMessageHide; expires=Fri, 3 Aug 2050 20:47:11 UTC; path=/";

解决方案 #

你说得没错，核心就是修改expires参数的值，把固定的远期日期改成当前时间加上14天的UTC格式时间。

具体实现步骤：

• 创建一个当前时间的Date对象
• 给这个时间增加14天的毫秒数（1天=246060*1000毫秒）
• 把这个新日期转换成符合Cookie要求的UTC字符串

修改后的代码行如下：

// 计算14天后的日期
const expireDate = new Date();
expireDate.setTime(expireDate.getTime() + 14 * 24 * 60 * 60 * 1000);
// 设置cookie，使用UTC格式的过期时间
document.cookie = `cookie2=cocoMessageHide; expires=${expireDate.toUTCString()}; path=/`;

完整修改后的代码 #

//  Announcement Banner
var button = document.querySelector("button");
var element = document.querySelector("div");
var 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天后过期的逻辑
    const expireDate = new Date();
    expireDate.setTime(expireDate.getTime() + 14 * 24 * 60 * 60 * 1000);
    document.cookie = `cookie2=cocoMessageHide; expires=${expireDate.toUTCString()}; path=/`;
});

if (document.cookie.indexOf("cookie2=") >= 0) {
    document.getElementById("top-site-message-wrapper").style.display = "none";
    body.style.paddingTop = "0px";
}

这样设置后，用户点击隐藏横幅时，浏览器会存储一个14天后过期的Cookie，过期后Cookie自动失效，横幅就会重新显示。

内容的提问来源于stack exchange，提问作者Pajurama Kreativagentur