草稿自动恢复需确保存得准、读得稳、清得及时：防抖写入localStorage防Safari无痕失败，key须含业务上下文，回填校验时间戳与登录态，beforeunload仅同步落盘并及时解绑。
草稿自动恢复不是“存了就能用”，关键在三个动作是否闭环：存得准、读得稳、清得及时。没做防抖或忽略 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 字段做隔离，不能只看时间。
