点赞状态应以dataset为准实时切换，服务端返回初始计数与状态，前端仅做±1；SVG图标更优，通过CSS控制fill变色；localStorage仅作体验过渡，需与DOM、接口状态手动同步兜底。
点赞按钮点击后如何实时切换状态和计数
直接操作 DOM 是最简单的方式，但要注意避免重复绑定事件或误触发。用 dataset 存储当前状态比读取文本更可靠，比如用 data-liked="false" 初始值，点击时翻转它并更新 textContent 和样式。
- 别用
innerText判断是否已点过——中文空格、换行或前后空格会导致判断失败；始终以dataset为准 - 计数建议从服务端返回初始值（如
data-count="24"），前端只做 +1/-1，不自己维护总值 - 加
disabled属性防连点，配合setTimeout恢复（模拟请求延迟），否则用户可能狂点导致状态错乱
收藏图标用 SVG 还是字体图标？怎么动态变色
SVG 更可控：能直接用 CSS 控制 fill，支持 :hover/:active，且不会因字体加载失败而显示方块。把 SVG 内联进 HTML，用 class="icon-bookmark" 统一管理，再通过 JS 切换 active 类。
- 不要用
这类字体图标硬编码，字体未加载完成时会闪白或显示乱码 - 变色靠
.icon-bookmark.active { fill: #e74c3c; }，不是 JS 直接改 style.fill - 如果必须复用图标，把 SVG 提成
<symbol>放在<svg><defs>里，用<use href="#bookmark">引用
本地模拟点赞/收藏状态要不要存 localStorage
要，但仅作体验优化——不能替代服务端状态。用户刷新后应以服务端返回的 data-liked="true" 为准，localStorage 只用来「过渡」：在接口返回前维持上次操作的视觉状态。
- 键名用组合式，如
like_post_123，避免所有文章共用一个 key 导致冲突 - 写入时机放在点击后立即执行，而不是等接口成功回调——否则有延迟感
- 接口失败时，记得回滚 localStorage 并提示用户，否则状态永久错位
点击后发请求，但没写 fetch 或 axios 怎么办
用原生 fetch 足够，不用引入库。重点不是发不发出去，而是怎么处理 loading、错误、并发。比如用户快速连点两次，第二次请求应被忽略或 abort。
立即学习“前端免费学习笔记（深入）”；
- 用
AbortController控制单次请求生命周期，避免旧请求回调覆盖新状态 - 错误时恢复按钮原始状态，别留着「已点赞」文字却实际没成功
- URL 路径别写死，从按钮上读
data-url="/api/like/123"，方便后端改路由时前端不用动
