用 localstorage 记住收藏状态需用唯一 key（如 fav-${articleid}），存取时用 json.stringify/parse 避免类型错误，点击时通过 dataset 读 id、class 切换图标、textcontent 更新文字，并在请求前后同步本地与 ui 状态。
怎么用 localStorage 记住收藏状态
浏览器里没后端时，localStorage 是最直接的方案。它能持久存一个布尔值或 ID 列表，刷新不丢，也不用发请求。
常见错误是只存 true/false，结果多个按钮共用同一 key，点一个全变；或者没做类型转换，localStorage.getItem('fav') 返回的是字符串 "true"，直接拿去 if 判断会出错。
- 用唯一标识当 key，比如
`fav-${articleId}`，别用固定名isFav - 存值统一用
JSON.stringify(true)，取值用JSON.parse(localStorage.getItem(key)) || false - 操作完立刻更新 UI，别等异步回调（比如没等
fetch成功就改图标）
点击时怎么同步更新图标和文字
DOM 更新必须手动触发，HTML 本身不会“响应式”。图标切换靠 class 控制（比如 icon-fav 和 icon-fav-filled），文字靠 innerText 或 dataset。
容易踩的坑：用 innerHTML 插入带引号的 HTML 字符串导致转义混乱；或者给多个按钮绑同一个事件监听器却没传参，结果总改第一个。
- 推荐用 data 属性存 ID：
<button data-id="123">收藏</button> - 事件里读
event.target.dataset.id，再查localStorage状态 - 图标用 class 切换：
btn.classList.toggle('active', isFav)；文字用btn.textContent = isFav ? '已收藏' : '收藏'
为什么用 dataset 不用 getAttribute
dataset 自动处理 kebab-case 转 camelCase，且返回值类型更可靠；getAttribute 返回全是字符串，还得自己 parseInt 或 JSON.parse。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
比如 data-article-id="456"，el.dataset.articleId 直接得 "456"；而 el.getAttribute('data-article-id') 也得字符串，但拼错属性名时 dataset 返回 undefined，getAttribute 返回 null —— 两者都得判空，但 dataset 更贴近语义。
- 优先用
dataset读写自定义属性 - 写的时候用
el.dataset.fav = 'true'，别用setAttribute('data-fav', true)（后者会转成字符串"true"，但不如显式控制） - 注意：
dataset只支持字母、数字、连字符、下划线，不能有冒号或点
服务端已登录时要不要还走 localStorage
要，但只是临时态。用户点了收藏，前端先用 localStorage 立刻反馈，同时发请求到后端；成功后再把 localStorage 同步过去，失败则回滚 UI 并提示。
否则会出现“点完没反应”，尤其弱网下用户以为没点上，反复点，造成重复提交。
- 请求发出去后立即更新本地状态，别等响应
- catch 里执行
localStorage.removeItem(key)或设回 false，并还原按钮文字/图标 - 避免在未登录时调用需鉴权的接口，先检查
localStorage.getItem('token')再决定走哪条路径
真实场景里，收藏状态可能跨设备不同步，localStorage 只负责“本机当前会话”的瞬时反馈，这个边界得心里有数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
