用localStorage实现草稿自动保存需遵循“停笔即存、加载即显、提交即清”：通过防抖（500–800ms）避免输入法污染，键名带上下文（如draft-article-123），恢复时校验DOM与时间戳，提交成功后立即removeItem。
用 localStorage 实现未提交文章草稿的自动保存，核心是“停笔即存、加载即显、提交即清”，不是一敲就写，也不能等提交才动。关键在防抖控制频率、键名隔离上下文、恢复时校验时机和状态。
监听输入并加防抖，避开中文输入法陷阱
直接绑定 input 事件立刻调用 localStorage.setItem() 会把拼音中间态（如“zhong”拆成“z”“zh”“zho”）反复写入，既卡顿又污染草稿。必须加防抖：
- 用
setTimeout+clearTimeout手写防抖，延迟 500–800ms 再保存——用户停笔即落盘 - 每次新输入先清除上一个定时器；仅当内容实际变化（
el.value !== lastSavedValue）才写入 - 跳过
type="password"或带data-no-autosave属性的字段，不存纯空白或空字符串
用带上下文的键名，避免多页面互相覆盖
键名不能简单叫 "draft" 或 "article-draft"，否则用户在两个标签页编辑不同文章，后存的会冲掉前存的：
- 推荐格式：
"draft-article-" + articleId（如有 ID）或"draft-" + location.pathname（如 /post/123） - 动态页面（如 SPA）中，键名应在 DOM 挂载后生成，不能硬编码在脚本里
- 若需存结构化信息（如标题+正文+时间），用
JSON.stringify()序列化后再存，读取时配套JSON.parse()
页面加载后安全恢复，兼顾框架与交互响应
草稿读到了但没显示出来？大概率是执行太早或没触发更新：
- 恢复逻辑必须放在
DOMContentLoaded后；Vue/React 等框架中，需在mounted或useEffect(() => {}, [])中执行 - 恢复前检查元素是否存在：
if (el && el.value !== undefined)，再赋值，避免报错中断 - 填完值后手动派发事件：
el.dispatchEvent(new Event('input', { bubbles: true }))，否则 v-model 或受控组件无法感知 - 可加时间戳校验：只恢复 24 小时内保存的草稿，过期自动忽略
提交成功后立即清理，防止重复弹出
这是最容易被忽略的一环。不清理会导致用户下次打开页面，又看到已发过的草稿，可能误操作重复提交：
- 仅在收到明确成功响应（HTTP 2xx + JSON 中
success: true）后，调用localStorage.removeItem(key) - 传统表单全页跳转场景下，服务端应在返回 HTML 中内联清除脚本：
<script>localStorage.removeItem("draft-article-123")</script> - 提供「清空草稿」按钮，点击即删除对应 key 并清空编辑区，同时置灰按钮 1 秒给予反馈
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
