可直接用 localstorage 存储未读消息列表，需 json 序列化结构化数据，页面加载时读取渲染并更新角标，点击“已读”后过滤或清空缓存，建议限制条数、添加过期逻辑，并检测兼容性降级。
可以直接用 localStorage 存储未读消息列表，页面加载时读取并展示，用户点击“已读”后更新状态或清空缓存——简单、可靠、无需后端配合。
用 localStorage 存储未读消息
消息本质是结构化数据（如 ID、标题、时间、是否已读），但 localStorage 只支持字符串。所以需用 JSON 序列化：
- 保存多条消息：
window.localStorage.setItem('unreadMsgs', JSON.stringify([{id:1,title:'系统更新',time:'2026-03-16'}, {id:2,title:'订单已发货',time:'2026-03-17'}])) - 读取时还原：
const msgs = JSON.parse(window.localStorage.getItem('unreadMsgs') || '[]')，加|| '[]'防止首次读取为 null 报错 - 只存关键字段，避免冗余（比如不存大段正文或图片 base64）
控制显示与状态更新
消息通知栏通常只需展示标题+时间+角标数，逻辑可这样组织：
- 页面初始化时读取
unreadMsgs，渲染列表并更新小红点数字（msgs.length） - 用户点击某条消息，调用
markAsRead(id)：过滤掉该 ID，再写回 localStorage - 点击“全部已读”，直接
window.localStorage.removeItem('unreadMsgs') - 若需区分“已读但未清除”，可给每条加
read: false字段，更新时仅改字段值
注意过期与容量边界
localStorage 永久存在，但消息不该无限累积：
- 建议限制最多存 20 条，超出时自动截取最新部分：
msgs.slice(-20) - 如需自动过期（比如 7 天前的消息不显示），存入时加
expires: Date.now() + 7*24*60*60*1000，读取时过滤：msgs.filter(m => m.expires > Date.now()) - 单域名 localStorage 容量约 5–10MB，纯文本消息几乎不会触及上限，但避免存附件或长日志
兼容性与降级处理
所有现代浏览器都支持 localStorage，但安全策略下可能被禁用（如无痕模式、企业策略）：
- 使用前先检测：
if (typeof localStorage !== 'undefined')，否则 fallback 到内存变量（刷新即丢） - 不要依赖它做关键业务逻辑（如支付确认），仅用于 UI 层提示增强
- 服务端仍需维护真实未读状态，前端缓存只是优化体验的副本
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
