localstorage草稿自动保存需监听输入并防抖写入，使用唯一key和对象结构存储含元信息的数据，页面加载时校验时间后恢复，并在提交或用户操作后及时清理。

LocalStorage 实现草稿自动保存，核心是监听用户输入并定时/实时写入键值对，同时在页面加载时读取并还原内容。关键在于时机控制、防抖处理和数据结构设计，避免频繁写入或覆盖有效内容。

监听输入并节流写入

直接在 input、textarea 上绑定 input 事件会导致高频触发，影响性能。推荐使用简易防抖逻辑，例如延迟 800ms 后保存：

• 每次输入清空上一次定时器，重设新定时器
• 仅当内容实际变化（与上次保存值不同）才执行写入
• 可为每个编辑区域分配唯一 key，如 "draft-article-123" 或 "draft-contact-form"

合理设计存储键名与内容结构

不要只存纯文本，建议用对象结构记录元信息，便于后续管理：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 存储格式示例：{ "content": "用户输入...", "updatedAt": 1715829340123, "title": "未命名草稿" }
• key 名建议带业务上下文，如页面路径 + 表单 ID：localStorage.setItem("draft-/editor?id=456", JSON.stringify(data))
• 避免使用固定 key（如 "draft"），防止多标签页/多表单互相覆盖

页面加载时自动恢复草稿

在 DOM 加载完成后（如 DOMContentLoaded 或 Vue 的 mounted、React 的 useEffect），尝试读取对应 key：

• 先检查 localStorage 是否存在该 key，再 JSON.parse 解析
• 校验 updatedAt 时间是否过期（例如超过 7 天可忽略），提升数据可靠性
• 恢复内容后，可提示用户“检测到未提交的草稿，是否继续编辑？”（需额外 UI 支持）

配合表单提交与清理机制

草稿不是永久保留，应在合适时机清除：

• 表单成功提交后，立即调用 localStorage.removeItem(key)
• 用户主动点击“清空草稿”或“放弃编辑”时同步删除
• 可增加定期清理逻辑：启动时遍历所有 draft key，剔除超期或无效项（注意 Safari 私密模式下 localStorage 可能被禁用）

不复杂但容易忽略细节：跨浏览器兼容性良好，但需注意 iOS Safari 在无痕模式下会抛出 QuotaExceededError；建议包裹 try/catch 并降级处理（如仅内存暂存）。

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