页面刷新时localStorage异常？Cookie政策弹窗每页重复弹出求助

看起来你遇到了弹窗在每个页面都重复弹出的小麻烦，根源其实很明确——你的代码只做了读取localStorage的判断，但没有在用户关闭弹窗时把“已显示过”的状态写入localStorage。虽然localStorage是同源网站所有页面共享的，但当前逻辑里这个标记根本没被存下来，所以每次进入新页面都会重新触发弹窗。

下面是修正后的完整代码，直接替换你的现有逻辑就行：

$(document).ready(function () {
    // 先检查localStorage里有没有标记过弹窗已显示
    if (localStorage.getItem('pops') !== 'visible') {
        setTimeout(function () {
            $('#cookie_popup').css('bottom', '0');
        }, 1000);
    }

    // 点击关闭按钮时，隐藏弹窗同时把状态写入localStorage
    $('#cookie_popup a.button').click(function () {
        $('#cookie_popup').css('bottom', '-100px');
        // 关键：这里把状态存进去，其他页面就能读到了
        localStorage.setItem('pops', 'visible');
    });
});

核心修正说明： #

• 新增了localStorage.setItem('pops', 'visible')这行代码，只要用户手动关闭过一次弹窗，这个标记就会存在浏览器的localStorage里，同源下的所有页面都会读取到这个状态，不会再重复显示弹窗。
• 保留了你原本的延迟1秒显示弹窗的逻辑，不影响原有交互体验。

额外优化（可选）： #

如果你的需求是弹窗在一定周期后（比如30天）重新提醒用户，而不是永久不再显示，可以用时间戳来替代简单的状态标记：

$(document).ready(function () {
    const popupExpireDays = 30; // 弹窗30天后重新显示
    const storedTimestamp = localStorage.getItem('popsTimestamp');
    const now = Date.now();

    // 判断：要么没存过标记，要么标记已经过期
    if (!storedTimestamp || now - parseInt(storedTimestamp) > popupExpireDays * 24 * 60 * 60 * 1000) {
        setTimeout(function () {
            $('#cookie_popup').css('bottom', '0');
        }, 1000);
    }

    $('#cookie_popup a.button').click(function () {
        $('#cookie_popup').css('bottom', '-100px');
        // 存储当前时间戳，用来计算过期时间
        localStorage.setItem('popsTimestamp', Date.now().toString());
    });
});

这样设置后，弹窗会在用户关闭后的30天内保持隐藏，到期后会再次弹出，适合需要定期合规提醒的场景。

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