HTML怎么做草稿自动恢复_html草稿内容自动恢复方案【完整版】-html教程-PHP中文网

草稿自动恢复需确保存得准、读得稳、清得及时：防抖写入localstorage防safari无痕失败，key须含业务上下文，回填校验时间戳与登录态，beforeunload仅同步落盘并及时解绑。

html怎么做草稿自动恢复_html草稿内容自动恢复方案【完整版】

草稿自动恢复不是“存了就能用”，关键在三个动作是否闭环：存得准、读得稳、清得及时。没做防抖或忽略 Safari 无痕模式，写入会静默失败；不校验时间戳或不区分多表单 key，可能拿错草稿甚至覆盖他人内容。

localStorage.setItem 防抖写入必须加，否则 Safari 无痕模式直接报错

每次 input 事件都调用 localStorage.setItem 是高危操作。iOS Safari 在无痕模式下，localStorage 实际是只读的，setItem 会抛出 QuotaExceededError 或静默失败，用户毫无感知。

对 textarea 和 input[type="text"]，用 input 事件 + 800ms 防抖：每次触发先 clearTimeout(timer)，再 timer = setTimeout(() => { /* 存 */ }, 800)
对 checkbox、radio、select，改用 change 事件，不防抖——状态变更即需记录
所有写入必须包裹 try/catch，失败时降级存到内存对象（如 const memDraft = {}），避免功能中断

页面加载时回填要等 DOM 就绪，且 key 必须带业务上下文

DOMContentLoaded 是唯一稳妥时机。用 window.onload 太晚，部分 input 可能还没挂载；用 document.querySelector 过早则返回 null，回填直接失效。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

key 名不能是固定字符串如 "draft"，应含路径与表单标识，例如 "draft-/editor?id=123" 或 "draft-contact-form-v2"
回填前先 JSON.parse(localStorage.getItem(key))，再检查 updatedAt 是否超 7 天，过期跳过
对 checkbox/radio，设 elem.checked = true；对 select，设 elem.value = data.selectedValue，别只设 selectedIndex

beforeunload 补漏保存只能同步写，且提交后必须解绑

beforeunload 不是兜底保险，它不允许异步操作（比如 await fetch()），也不能阻止页面关闭，只适合做“最后一刻的内存草稿落盘”。

绑定时只做一件事：localStorage.setItem(key, JSON.stringify(currentDraft))，不加任何判断或网络请求
表单成功提交后，立刻执行 window.removeEventListener('beforeunload', handler)，否则用户下次进页面还会多存一次
若使用 Vue/React，应在组件卸载（onUnmounted / useEffect cleanup）中解绑，而非依赖全局 submit 事件

最常被绕开的细节是多标签页冲突：两个标签同时编辑同一表单，靠时间戳 updatedAt 判断谁更新、谁丢弃，但没人校验登录态是否一致——用户 A 登录后开了两个 tab，A 退出、B 登录，tab 里还留着 A 的草稿，这时候该清不该清？得结合 user_id 字段做隔离，不能只看时间。