如何设置带过期时间的localStorage控制模态框展示逻辑

• 存储逻辑错误：现有代码仅在localStorage中存了固定标记值1，没有记录上次触发弹窗的时间戳，每次页面加载都会重新生成一个新的24小时过期时间，根本无法对比和上次弹窗的实际间隔。
• 判断逻辑倒置：现有判断条件currentTime < expires永远在页面刚加载时成立，且代码末尾无论是否触发弹窗都会执行localStorage.setItem('alert', '1')，导致第一次加载后标记值永远存在，后续刷新永远无法触发弹窗。
• 无效清除逻辑：else分支无差别执行移除存储项的操作，和后续的写入操作冲突，等于每次进页面都先删再写，完全起不到时间间隔控制的作用。

• 不需要使用setInterval或循环做自动清除：localStorage本身没有原生过期机制，且页面关闭后JS定时器会直接停止运行，完全没必要做驻留内存的定时检测。只需要在每次页面初始化时做一次时间对比即可，性能开销可以忽略。
• 测试1分钟过期效果时，只需要把代码里的过期时长常量从24小时对应的毫秒值换成1分钟对应的毫秒值即可。
• 不需要手动执行removeItem清除过期项：直接在触发弹窗时覆盖写入最新的时间戳即可，未过期时不做任何存储操作，逻辑更简洁不会冲突。

$(document).ready(function() {
  // 校验浏览器支持localStorage、用户已登录
  if (window.localStorage && '<%= current_user %>') {
    // 过期时长配置：默认24小时（单位毫秒），测试时替换为 60 * 1000 即为1分钟过期
    const EXPIRE_DURATION = 24 * 60 * 60 * 1000;
    const STORAGE_KEY = 'alert_last_show_time';
    // 读取上次弹窗的时间戳，从未弹窗过则返回null
    const lastShowTime = localStorage.getItem(STORAGE_KEY);
    const currentTime = Date.now();

    // 触发弹窗条件：从未弹过窗，或者距上次弹窗时长超过设定值
    if (!lastShowTime || currentTime - Number(lastShowTime) >= EXPIRE_DURATION) {
      swal({
        icon: 'warning',
        text: 'Notice text here.',
        closeOnClickOutside: false,
        button: 'ok'
      });
      // 弹窗触发后写入当前时间戳，作为下次时间对比的基准
      localStorage.setItem(STORAGE_KEY, String(currentTime));
    }
  }
});

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