如何设置localStorage24小时过期实现网站访问弹窗定时重现

原有代码问题 #

你之前写的逻辑存在两个致命问题，完全无法实现预期的间隔判断：

• 仅在localStorage中存储了"true"/"false"的布尔标记，没有记录弹窗上次展示的具体时间，根本无法计算两次访问的时间间隔
• 调用getHours()获取当日小时数做范围判断完全无效，该方法只会返回当前时间在当天0-23区间的小时值，跨天、跨月、跨年的时间差完全无法通过这个值计算

正确实现逻辑 #

localStorage本身没有原生过期配置，要实现24小时有效期，只需要在弹窗展示时把当前时间戳存入localStorage，每次用户访问站点时取出存储的时间戳，和当前时间做差值计算，差值超过24小时对应的毫秒数就重新触发弹窗，同时更新存储的时间戳即可。

修正后可直接运行的代码 #

// 24小时对应的毫秒值
const DIALOGUE_EXPIRE_MS = 24 * 60 * 60 * 1000;
// 读取上次弹窗展示的时间戳
const lastShowTime = window.localStorage.getItem("dialogue_last_show");
const currentTime = Date.now();

// 满足两个条件之一就弹出弹窗：从未展示过弹窗 / 距上次展示已超过24小时
if (!lastShowTime || (currentTime - Number(lastShowTime)) >= DIALOGUE_EXPIRE_MS) {
    // 初始化弹窗内容
    const dialogue = new Dialogue();
    dialogue.setHtmlMessage(string('dialogue-heading'));
    dialogue.addHtmlDetail(string('dialogue-detail'));
    // 弹窗触发后更新存储的时间戳，重新开始24小时计时
    localStorage.setItem("dialogue_last_show", String(currentTime));
}

可选调整说明 #

• 如果你需要等用户主动关闭弹窗后才开始计算24小时间隔，只需要把localStorage.setItem那行代码移到弹窗关闭的回调事件里即可
• 时间戳存储时统一转成字符串，读取计算时转回数字类型，避免隐式类型转换导致的判断异常
• 如果需要支持用户手动永久关闭弹窗，可以额外加一个永久关闭的标记位判断，和时间戳判断做与逻辑即可

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