推荐存未读数量而非布尔值，统一管理读写、注意类型转换和更新时机，结合时间戳控制过期，监听storage事件同步多标签页状态，登出时精准清理缓存。

直接用 localStorage 存一个布尔值或数字即可，关键是统一管理读写逻辑、注意数据类型和更新时机。

存未读数量（推荐）

比单纯存 true/false 更灵活，支持“0 → 1 → 2 → 0”这类变化，也方便后续展示具体数字：

• 新增通知时：读取当前值，+1 后存回（注意字符串转数字）
• 用户点击进入通知页或标记已读时：设为 0
• 示例代码：
    const unreadCount = Number(localStorage.getItem('notify_unread') || '0');
    localStorage.setItem('notify_unread', String(unreadCount + 1));

存时间戳判断是否过期

避免长期缓存导致状态陈旧，比如每天重置一次未读状态：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• 写入时同时存时间戳：localStorage.setItem('notify_unread_at', Date.now().toString())
• 读取前先检查是否超过 24 小时：
    const lastTime = Number(localStorage.getItem('notify_unread_at') || '0');
    if (Date.now() - lastTime > 24 * 60 * 60 * 1000) {
      localStorage.setItem('notify_unread', '0');
      localStorage.setItem('notify_unread_at', Date.now().toString());
    }

配合页面生命周期自动同步

确保红点状态在多标签页间一致（LocalStorage 本身会触发 storage 事件）：

• 监听 storage 变化，更新当前页 UI：
    window.addEventListener('storage', (e) => {
      if (e.key === 'notify_unread') {
        updateBadge(Number(e.newValue || '0'));
      }
    });
• 新标签页打开时主动读取一次初始值，避免首次不显示

清除逻辑要明确

用户登出或切换账号时，必须清掉缓存，否则可能残留上一个用户的红点：

• 登出时执行：localStorage.removeItem('notify_unread');
• 如果用了时间戳，一并清理：localStorage.removeItem('notify_unread_at');
• 不建议用 clear()，避免误删其他业务数据

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南