如何通过Cookies保存Modal弹窗状态并在页面返回时恢复？

嘿，这个需求挺实用的！我帮你调整了原有的Modal脚本，加入Cookie逻辑来记住弹窗状态，用户下次回到页面时就能自动恢复之前的显示/隐藏状态啦。

完整修改后的代码 #

// 获取Modal元素和相关控件
var modal = document.getElementById('myModal');
var btn = document.getElementById("logo");
var span = document.getElementsByClassName("close")[0];

// 封装Cookie操作工具函数
function setCookie(name, value, days) {
    let expires = "";
    if (days) {
        const date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = `${name}=${value || ""}${expires}; path=/`;
}

function getCookie(name) {
    const nameEQ = `${name}=`;
    const ca = document.cookie.split(';');
    for(let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) === ' ') c = c.substring(1);
        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length);
    }
    return null;
}

// 页面加载时自动恢复Modal状态
window.addEventListener('load', function() {
    const modalState = getCookie("modalState");
    if (modalState === "show") {
        modal.style.display = "block";
    }
});

// 点击按钮打开Modal，同时记录状态到Cookie
btn.onclick = function() {
    modal.style.display = "block";
    setCookie("modalState", "show", 7); // 状态保存7天，可按需修改天数
};

// 点击关闭按钮隐藏Modal，更新Cookie状态
span.onclick = function() {
    modal.style.display = "none";
    setCookie("modalState", "hide", 7);
};

// 点击Modal外部关闭弹窗，同步更新Cookie
window.onclick = function(event) {
    if (event.target === modal) {
        modal.style.display = "none";
        setCookie("modalState", "hide", 7);
    }
};

关键逻辑说明 #

• Cookie工具函数：setCookie负责存储状态（可以设置过期时间，示例是7天），getCookie负责读取存储的状态；
• 页面初始化恢复：页面加载完成后，读取modalState Cookie，如果之前是显示状态（值为show），就自动打开Modal；
• 状态同步更新：每次打开或关闭Modal时，都会同步更新Cookie的值，确保状态被实时记录。

如果用户手动清除了浏览器Cookie，状态会重置为默认的隐藏状态，这是正常的浏览器行为~

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