用 localstorage 实现草稿箱的核心是“自动保存 + 手动恢复”：监听 textarea 的 input 事件实时存字符串到 "draft_content"，页面加载时读取并填充；提交或清空时调用 removeitem 清理，辅以节流、空值校验和 try...catch 兼容处理。
用 localStorage 实现草稿箱，核心是“自动保存 + 手动恢复”，无需后端，几行 JS 就能搞定。
监听输入并实时存入 localStorage
在文本编辑区域（如 <textarea id="draft"></textarea>）上绑定 input 事件，每次用户打字就更新本地存储：
- 用键名如
"draft_content"存储正文，"draft_timestamp"记录最后修改时间（可选） - 注意：直接存字符串即可，
localStorage只支持字符串值，所以对象需先JSON.stringify() - 示例代码：
document.getElementById("draft").addEventListener("input", function() {<br> localStorage.setItem("draft_content", this.value);<br>});
页面加载时自动恢复草稿
在页面初始化阶段（如 window.onload 或 DOMContentLoaded 后）读取并填充内容：
- 先检查
localStorage.getItem("draft_content")是否存在且非空 - 若存在，赋值给
textarea.value，并可选地提示用户“检测到未发送的草稿” - 避免覆盖用户刚打开页面时的空白编辑状态——建议只在内容不为空时恢复
提供手动清空或提交后的清理机制
草稿不是永久保留的，需明确触发清理时机：
- 用户点击“发布”或“提交”按钮后，调用
localStorage.removeItem("draft_content") - 添加“清空草稿”按钮，点击即清除，并清空 textarea 显示
- 可选增强：提交成功后检查响应状态，仅在成功时才删除，防止误删
补充细节提升体验
小优化让功能更可靠、更友好：
- 加节流（throttle）：高频输入下不必每键都存，可用
setTimeout延迟 500ms 再保存，减少 I/O 次数 - 存储前校验长度：避免存入超长或纯空白内容（如
value.trim() === ""就跳过保存） - 兼容性提醒：所有现代浏览器都支持
localStorage，但隐身模式下可能被禁用，可包裹try...catch避免报错
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
