localstorage消息中心核心是读得快、判得准、清得稳，仅存id/title/time/read等必要字段，限制20条并加过期时间，需检测兼容性并降级，服务端才是未读状态唯一信源。
用 localStorage 构建本地消息通知中心，核心不是“存得多”，而是“读得快、判得准、清得稳”。它适合做前端体验增强层，不承担业务状态主责，但能显著降低请求频次、提升响应感。
结构化存储未读消息列表
消息本质是轻量结构体，只存必要字段：id、title、time、read（布尔值）。避免存正文、图片或长链接——这些交给后端接口按需拉取。
- 保存时序列化：
window.localStorage.setItem('unreadMsgs', JSON.stringify([{id:1,title:'系统更新',time:'2026-04-30T06:00:00Z',read:false}])) - 读取加兜底：
const msgs = JSON.parse(window.localStorage.getItem('unreadMsgs') || '[]')，防止首次访问 null 报错 - 渲染角标数直接用
msgs.filter(m => !m.read).length，比遍历 DOM 更可靠
状态同步与用户操作闭环
点击“已读”不是视觉变化，而是数据状态更新。每一步操作都应映射到 localStorage 的真实写入。
- 单条标记已读：过滤出非当前 id 的消息，再写回：
localStorage.setItem('unreadMsgs', JSON.stringify(msgs.map(m => m.id === targetId ? {...m, read: true} : m))) - 全部已读：可清空键，也可批量改 read 字段，推荐后者，保留历史痕迹便于调试
- 删除某条：用
msgs.filter(m => m.id !== targetId)后重写，避免残留
控制容量与自动过期
localStorage 不会自动清理，放任累积会导致解析变慢、内存压力上升，尤其在低配设备上明显。
- 限制条数：入库前截取最新 20 条 ——
msgs.slice(-20) - 添加过期时间：存入时加
expires: Date.now() + 7 * 24 * 60 * 60 * 1000，读取时过滤掉过期项 - 避免冗余字段：不存用户头像 base64、HTML 片段等，纯文本字段总大小几乎不会触达 5MB 上限
兼容性处理与降级策略
不是所有环境都支持 localStorage，尤其无痕模式、企业浏览器策略或老旧 WebView 中可能被禁用。
- 使用前检测：
if (typeof localStorage === 'undefined') { fallbackToMemoryCache(); } - 降级方案只需用一个全局数组暂存，刷新即丢，不影响功能主流程
- 切记：服务端始终是真实未读状态的唯一信源，前端缓存只是 UI 层快照，每次进入页面建议结合轻量轮询或 WebSocket 初步校准
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
