前端消息已读状态必须以服务端为准，data-read属性驱动ui，localstorage仅作轻量缓存，左滑需touch事件+阈值判断，禁止依赖dom class或本地存储作为唯一状态源。
消息列表的已读/未读状态，前端能管的只是 UI 层展示和本地交互反馈；真实状态必须以服务端为准，前端缓存只是体验优化手段。别把 localStorage 当数据库用，也别靠 DOM class 切换来判断“是否已读”。
怎么用 data 属性控制已读/未读显隐
红点、角标、列表项样式变化，应该由 HTML 属性驱动，而不是靠 JS 操作 class 或移除元素。这样既利于 CSS 控制，也避免框架里属性丢失导致状态错乱。
- 给每条消息加
data-read="0"（未读）或data-read="1"（已读），初始值写死在 HTML 里或由 JS 注入 - CSS 里用
[data-read="0"] .badge显示红点，[data-read="1"] .badge设为display: none - 点击“已读”时只改属性：
el.dataset.read = "1"，不要删节点、不要 toggle class - Vue/React 中注意：值为
false或0时属性可能被自动移除，得强制转字符串，比如data-read={String(read)}
怎么用 localStorage 缓存未读状态
localStorage 适合存轻量、非关键的状态快照，比如当前页面看到的未读消息 ID 列表。它不能替代后端状态，但能避免每次刷新都重拉一遍全量消息。
- 存结构化数据必须
JSON.stringify()，读取时加兜底：JSON.parse(localStorage.getItem('unreadMsgs') || '[]') - 只存必要字段：比如
{id: 123, time: '2026-04-06'}，别塞content大段文本或 base64 图片 - 限制条数防膨胀：存前用
msgs.slice(-20)取最新 20 条 - 加过期字段更稳妥：
expires: Date.now() + 7 * 24 * 60 * 60 * 1000，读取时过滤掉过期项 - 务必检测兼容性：
if (typeof localStorage !== 'undefined')，否则 fallback 到内存数组
怎么实现左滑标记已读（H5 手势）
纯 CSS 无法响应左滑，必须用 JS 监听 touch 事件计算位移。重点不是“怎么滑”，而是“滑到什么程度才触发”，以及“触发后如何与状态同步”。
- 监听
touchstart/touchmove/touchend，记录起始 X 坐标，计算偏移量deltaX = currentX - startX - 设定阈值（如
-80px），当deltaX 且方向稳定时，认为是有效左滑 - 触发后调用
markAsRead(id)：更新data-read属性 + 同步localStorage中对应 ID 状态 - 滑动过程中用
transform: translateX(${deltaX}px)实现视觉反馈，松手后补个transition回弹或滑出 - 注意阻止默认行为：
e.preventDefault()在touchmove里，否则页面会跟着拖拽滚动
为什么不能只靠前端判断“是否已读”
用户 A 在手机上点了“全部已读”，B 在 PC 上打开同一账号，列表还是满屏红点——这种问题不是 CSS 写错了，是把状态存在了错误的地方。
-
localStorage是域名级隔离的，不同设备、不同浏览器互不感知 - 用户手动清缓存、无痕模式、企业策略禁用存储，都会让前端状态瞬间丢失
- 服务端才是唯一可信源：每次拉消息接口应返回
read: true/false字段；“标为已读”操作必须发请求给后端落库 - 前端缓存只做两件事：减少首屏白屏时间、避免重复请求；它失效时，UI 应该优雅降级（比如显示“加载中”，而不是假装修复了状态）
最易被忽略的一点：红点位置偏移不是 CSS 写错了，是父容器没设 position: relative，或者图标用了 inline 显示模式却没处理基线对齐。先 fix 定位上下文，再调 top/right 数值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
