localstorage是收藏状态的默认选择，因其无需网络、刷新不丢、适合瞬时ui反馈；需用带唯一标识的key（如fav-${articleid}）、json序列化存取、点击即更新ui并异步同步后端。
不依赖，但必须配合。收藏动作本身是用户行为，而“已收藏”状态的持久化展示，离不开本地保存机制——尤其是没有后端登录态或未联网时。
为什么 localStorage 是收藏状态的默认选择
浏览器里没后端接口、没登录态、甚至没网络时，localStorage 是唯一能立刻记住“这个 ID 被点过”的方式。它不发请求、不等响应、刷新不丢，适合做 UI 的瞬时反馈。
- 存的是布尔值或 ID 列表，不是原始数据；用
fav-${articleId}这种带唯一标识的 key，避免多个按钮共用一个isFav导致全变 -
localStorage.setItem()只接受字符串，所以存前必须JSON.stringify(true)，取时得JSON.parse(localStorage.getItem(key)) || false - 别在
fetch()成功回调里才改图标——用户点了就该立刻变，失败再回滚 UI
dataset 比 getAttribute 更适合读取 articleId
收藏按钮上写 <button data-article-id="123">收藏</button>，事件里用 event.target.dataset.articleId 拿 ID，比 getAttribute('data-article-id') 更稳。
-
dataset自动把data-article-id转成articleId，拼错属性名时返回undefined，容易判空；getAttribute返回null，类型更难处理 - 写的时候也推荐
el.dataset.fav = 'true'，而不是setAttribute('data-fav', true)—— 后者隐式转字符串，语义不清 - 注意：
dataset不支持冒号、点号，只认字母、数字、连字符和下划线
服务端已登录时，localStorage 仍是临时态中转站
用户点了收藏，前端不能干等后端响应。正确流程是：先写 localStorage + 立刻更新 UI，再发请求；成功则同步服务端状态，失败则 removeItem() 并提示。
- 别跳过本地写入直接发请求——网络抖动或后端延迟时，UI 会卡在“未响应”状态，体验断层
- 如果后端返回的是收藏数（而非布尔值），别用它覆盖本地状态；应以按钮自己的 ID 为准做原子切换
- 登出或清缓存时，
localStorage里的收藏记录不会自动消失，得业务侧主动清理或加过期时间
真正容易被忽略的，是“多个收藏按钮共享同一份 localStorage 数据但没隔离作用域”——比如文章页、列表页、搜索页都用相同逻辑，却忘了不同页面的 DOM 加载时机和事件绑定顺序可能让状态错乱。动手前先想清楚：这个 key 是全局唯一，还是按页面上下文隔离？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
