textarea 实时存 localStorage 需防抖+去重+上下文隔离，恢复需 DOM 加载后执行并手动派发 input 事件；HTML/JS/CSS 混合内容须分离存文本与 UI 状态（光标、折叠等）。
直接监听 input 事件并立刻调用 localStorage.setItem() 是最常见也最失效的做法——中文输入法下存的是未完成的拼音碎片，编辑器状态（如光标、折叠行）完全丢失，刷新后代码还在但交互全失效。
textarea 输入内容怎么实时存进 localStorage
不能一敲就存。中文输入法（如搜狗、iOS 原生）在选词过程中会连续触发十几次 input，比如打“中国”会发出 “z”“zh”“zho”… 直接写入既卡顿又污染存储。
- 必须加防抖：用
setTimeout+clearTimeout手写，延迟500–800ms后再执行localStorage.setItem("editor-draft", el.value) - 每次新输入先清除上一个定时器；仅当
el.value !== lastSavedValue才真正写入 - 键名必须带上下文隔离，例如
editor-draft-${location.pathname}-${Date.now().toString(36)}，否则多个编辑页共用同一域名时互相覆盖 - 跳过
type="password"或带data-no-autosave属性的字段
页面加载时为什么草稿没恢复出来
八成是执行时机错了。DOM 还没挂载就去读取并赋值，document.getElementById("code-editor") 返回 null，或者 Vue/React 初始化把刚填的值又清掉了。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 恢复逻辑必须放在
DOMContentLoaded之后；单页应用需在mounted（Vue）或useEffect(() => {}, [])（React）里执行 - 读取前校验：
if (draft !== null && draft.trim() !== "")，避免JSON.parse(null)报错 - 对
textarea用el.value = draft，别用innerHTML—— 混合 HTML/JS/CSS 时有 XSS 风险 - 填完手动派发事件：
el.dispatchEvent(new Event('input', { bubbles: true }))，否则框架绑定的状态不更新
保存和恢复 HTML/JS/CSS 混合代码要注意什么
localStorage 只存字符串，但恢复时不能靠还原 DOM 结构来保留交互态——按钮点击失效、光标位置丢失、折叠状态重置，都是因为只存了文本，没管状态。
立即学习“前端免费学习笔记（深入）”；
- 纯文本草稿能保，但编辑器 UI 状态（光标、选区、折叠行、错误标记）得单独序列化：用 CodeMirror 的
getCursor()、Monaco 的getPosition()等 API 提取并存进额外 key - 预览区如果是
contenteditable，恢复时用el.textContent = draft，禁用innerHTML - 不要把整个
outerHTML存进去再用innerHTML = storedHtml插回来——所有事件监听器都会丢失 - 键名建议结构化：
editor-state-${formId}存状态，editor-content-${formId}存代码，分开管理
真正麻烦的从来不是“存字符串”，而是“同步状态”。光标停在哪、哪几行被折叠、当前高亮的语法错误项……这些没法靠一行 localStorage.setItem() 自动搞定，得一层层拆开，按编辑器能力分别存取。
