HTML怎么做草稿箱_HTML草稿箱列表管理实现方法【必看】-html教程-PHP中文网

浏览器无原生草稿箱API，需用JavaScript监听input事件、防抖存localStorage，带timestamp校验过期，白名单过滤敏感字段，恢复时异步setSelectionRange还原光标。

html怎么做草稿箱_html草稿箱列表管理实现方法【必看】

浏览器原生不提供 HTML 草稿箱功能，所有“草稿箱”效果都得靠 JavaScript 主动捕获、序列化、持久化用户输入，并手动管理列表结构——没有现成的 drafts API，也别指望 contenteditable 自带草稿能力。

核心是监听表单控件（、）的 input 事件，每次变化就存一次。注意不是用 change（只在失焦时触发），否则用户切走就丢内容。

实操建议：

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

给每个可编辑区域加唯一 id 或 data-draft-key，用于生成 localStorage key，例如 localStorage.setItem('draft-contact-form', JSON.stringify({ content: value, timestamp: Date.now() }))
加防抖（500ms），避免高频输入狂刷存储；但别用节流，否则可能漏存最后几字
检查 localStorage 是否可用（部分 iOS 隐私模式会直接抛 QuotaExceededError），需 try/catch 包裹写入逻辑
敏感字段（如密码、token）绝不能进草稿，建议白名单控制可存字段名，而非全量 form.elements

草稿列表本质是读取多个 localStorage key 后组装的数组，但用户可能删掉对应表单页、改了字段结构，或草稿超过 7 天没用——这些都得清理，否则列表越攒越多、点开却报错。

实操建议：

每次读取草稿前，先遍历所有已知 key（比如用 Object.keys(localStorage) 过滤出 draft-* 前缀），再逐个 JSON.parse；解析失败就 removeItem 掉这个 key
草稿对象里必须带 timestamp 字段，渲染列表时过滤掉 Date.now() - timestamp > 7 * 24 * 60 * 60 * 1000 的条目
列表项点击加载草稿时，要校验当前 DOM 是否还存在对应 id 的编辑器，不存在就提示“原始表单已不可用”，并自动清除该草稿
不要用 innerHTML += ... 拼接列表，用 document.createElement + appendChild 或 template 元素，避免 XSS（草稿内容可能含未转义 HTML）

单纯 element.value = draft.content 会丢失光标位置，用户还得手动拖到修改处。真要体验好，得存光标偏移量。

实操建议：

监听 focus 和 blur 时用 element.selectionStart/selectionEnd 记录位置，连同内容一起存进草稿对象
恢复时先赋值，再用 setTimeout(() => { element.focus(); element.setSelectionRange(start, end); }, 0) —— 必须异步，否则 DOM 还没重绘，setSelectionRange 无效
仅对和做光标恢复；contenteditable 元素要用 getSelection() + range API，复杂度高，多数场景建议回避
移动端 Safari 对 setSelectionRange 支持不稳定，可加 fallback：恢复后自动滚动到容器底部（element.scrollTop = element.scrollHeight）