点赞状态应以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 类。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 不要用  这类字体图标硬编码，字体未加载完成时会闪白或显示乱码
• 变色靠 .icon-bookmark.active { fill: #e74c3c; }，不是 JS 直接改 style.fill
• 如果必须复用图标，把 SVG 提成 <symbol></symbol> 放在 <svg><defs></defs></svg> 里，用 <use href="#bookmark"></use> 引用

本地模拟点赞/收藏状态要不要存 localStorage

要，但仅作体验优化——不能替代服务端状态。用户刷新后应以服务端返回的 data-liked="true" 为准，localStorage 只用来「过渡」：在接口返回前维持上次操作的视觉状态。

• 键名用组合式，如 like_post_123，避免所有文章共用一个 key 导致冲突
• 写入时机放在点击后立即执行，而不是等接口成功回调——否则有延迟感
• 接口失败时，记得回滚 localStorage 并提示用户，否则状态永久错位

点击后发请求，但没写 fetch 或 axios 怎么办

用原生 fetch 足够，不用引入库。重点不是发不发出去，而是怎么处理 loading、错误、并发。比如用户快速连点两次，第二次请求应被忽略或 abort。

• 用 AbortController 控制单次请求生命周期，避免旧请求回调覆盖新状态
• 错误时恢复按钮原始状态，别留着「已点赞」文字却实际没成功
• URL 路径别写死，从按钮上读 data-url="/api/like/123"，方便后端改路由时前端不用动

真实项目里最常出问题的不是逻辑写不出来，而是状态同步时机不对——比如 localStorage 写了，DOM 更新了，但接口失败了，没人负责把这三者拉回一致。这个环节得手动兜底。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！