离线草稿恢复需坚持“存得稳、读得准、清得及时”：通过防抖写入（800ms）、上下文隔离键名（draft-${formid}-${path}）、时间校验（7天内）、内存降级兜底及 dom 就绪后回填并派发事件，确保数据安全闭环。
离线页面恢复草稿，核心是“存得稳、读得准、清得及时”——不是简单调用 getItem 就完事，必须兼顾防抖写入、上下文隔离、时间校验和降级兜底。
防抖写入，避开输入法与 Safari 无痕陷阱
中文输入过程中，input 事件会高频触发（如打“中国”，中间态“zh”“zho”等都会触发），直接 setItem 不仅覆盖未完成内容，还可能在 iOS Safari 无痕模式下静默失败。正确做法是加 800ms 防抖：
- 每次输入先
clearTimeout(timer)，再timer = setTimeout(() => localStorage.setItem(key, value), 800) - 对
<textarea></textarea>和input[type="text"]用input事件；对checkbox、radio、select改用change事件（不防抖，状态变更即需记录） - 所有
setItem必须包裹try/catch，失败时降级存到内存对象（如const memDraft = {}），避免功能中断
键名带业务上下文，防止多表单/多用户冲突
用固定键名如 "draft" 是线上最常见草稿丢失原因。必须让键名能唯一标识当前场景：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 推荐格式：
draft-${formId}-${location.pathname}，例如draft-contact-form-/contact或draft-editor-id123 - 若表单动态渲染（React/Vue 组件或 AJAX 加载），
formId得在 DOM 挂载后获取，不能硬编码 - 敏感字段（如
password、身份证号）跳过保存逻辑，连空字符串都不存
页面加载时安全回填，兼顾 DOM 就绪与数据有效性
回填必须卡在 DOMContentLoaded 时机，太早取不到元素，太晚可能错过初始化：
- 先
JSON.parse(localStorage.getItem(key))，解析失败或返回null直接跳过 - 检查时间戳字段（如
savedAt），只恢复 7 天内的草稿：Date.now() - data.savedAt - 对
textarea和input设.value；对checkbox/radio设.checked；对select设.value（比.selectedIndex更稳） - 填值后手动派发
input或change事件：el.dispatchEvent(new Event('input', { bubbles: true }))，否则 Vue/React 受控组件无法响应
离开前补漏 + 提交后清理，形成闭环
beforeunload 不是万能保险，但它能兜住防抖未触发的最后一刻：
- 绑定时只做一件事：
localStorage.setItem(key, JSON.stringify(currentDraft))，不加判断、不发请求 - 表单提交成功后，立刻
window.removeEventListener('beforeunload', handler)解绑，否则下次进页面还会多存一次已提交的数据 - 后端返回成功响应（如 HTTP 200）后，调用
localStorage.removeItem(key)清理；若接口支持幂等，可加if (res.data.status === 'success')判断再删
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
