HTML收藏是否依赖本地保存？技巧详解

localStorage 是收藏状态的默认选择，因为它无需网络、刷新不丢，非常适合做瞬时 UI 反馈；记得用带唯一标识的 key（如 fa v-${articleId}），通过 JSON 序列化存取，点击后立刻更新 UI，再异步同步后端。

收藏功能本身不依赖本地存储，但缺少它就很难顺畅运作。用户“点一下”这个操作很简单，而“已收藏”状态的持续展示，尤其是在没有后端登录状态或网络离线时，必须依靠本地保存机制来实现。

为什么 localStorage 是收藏状态的默认选择

试想一下，在浏览器里没有后端接口、没有用户登录信息，甚至网络已经断开的情况下，有什么能立刻记住“这个 ID 被点击过”？答案是 localStorage。它不发送请求、不等待响应、刷新页面也不丢失数据，最适合需要瞬间反馈的 UI 交互。

• 存储的是布尔值或 ID 列表，而非原始数据。使用 fa v-${articleId} 这类带有唯一标识的 key，可以避免多个收藏按钮共用同一个 isFa v 变量时，一个发生变化导致所有按钮状态随之改变的麻烦。
• 因为 localStorage.setItem() 只接受字符串，所以存储前必须先执行 JSON.stringify(true)，读取时再用 JSON.parse(localStorage.getItem(key)) || false 解析回来。
• 关键点：不要等到 fetch() 请求成功回调中才修改图标状态。用户点击的瞬间，UI 应立即变化；如果请求失败，再回滚状态也不迟。

dataset 比 getAttribute 更适合读取 articleId

在收藏按钮上，通常这样写：收藏。在事件处理函数中，使用 event.target.dataset.articleId 获取 ID，这比 getAttribute('data-article-id') 更可靠。

• dataset 会自动将 data-article-id 转换为驼峰式 articleId。如果拼错属性名，它会返回 undefined，便于判空；而 getAttribute 返回 null，类型处理更繁琐。
• 写入时也推荐使用 el.dataset.fa v = 'true'，而不是 setAttribute('data-fa v', true)，因为后者会隐式将布尔值转换为字符串，语义不够清晰。
• 需要注意：dataset 不支持冒号、点号等字符，只识别字母、数字、连字符和下划线。

服务端已登录时，localStorage 仍是临时状态的中转站

用户点击收藏后，前端不能等待后端响应，否则体验太差。正确流程是：先写入 localStorage 并立即更新 UI，再发送请求。请求成功则同步服务端状态；请求失败则执行 removeItem() 并给出提示。

• 不要跳过本地写入直接发请求。网络抖动或后端延迟时，UI 会一直卡在“未响应”状态，这种体验断层非常糟糕。
• 如果后端返回的是收藏数（而非布尔值），用它覆盖本地状态并不明智。应依据按钮自身的 ID 进行原子化的状态切换。
• 用户登出或清空缓存时，localStorage 中的收藏记录不会自动消失。这需要业务层面主动清理，或为其加上过期时间。

真正容易被忽视的问题是：多个收藏按钮共享同一份 localStorage 数据，却没有做好作用域隔离。例如文章页、列表页、搜索页使用了相同的收藏逻辑，但不同页面的 DOM 加载时机和事件绑定顺序不同，容易导致状态错乱。动手之前想清楚：你的 key 是全局唯一的，还是需要按页面上下文做隔离？