自动保存本身不防丢失，真正防丢失需本地缓存+服务端心跳+用户可感知状态三层叠加：sessionStorage防刷新，localStorage定时带版本号同步，服务端异步保存并校验etag，界面实时显示保存状态并beforeunload兜底。
自动保存本身不会导致防丢失失效，但实现方式错位会让“已存”变成“白存”——比如防抖没触发就关页、恢复时机早于 DOM 就绪、多 tab 写入互相覆盖。核心不是禁用自动保存，而是让存、比、取、清四个环节严丝合缝。
localStorage.setItem 频繁调用卡顿或写入失败怎么办
直接在 input 事件里调用 localStorage.setItem() 是最常见也最危险的做法：中文输入法组合过程会高频触发，Safari 无痕模式下可能直接抛 QuotaExceededError，且同步写入阻塞主线程，输入延迟肉眼可感。
- 用
setTimeout+clearTimeout手写防抖，延迟设为300–800ms（太短压不住频次，太长赶不上关页） - 写入前必须
try { localStorage.setItem(...) } catch (e) { console.warn('localStorage write failed:', e) }，尤其 iOS Safari 容量默认仅 5MB 且不报明确错误 - 避免存原始 DOM 或未序列化对象，一律用
JSON.stringify({ value, timestamp: Date.now() })，否则读取时会报Unexpected token u in JSON at position 0 - 对
<textarea></textarea>和contenteditable元素要区分处理：textarea.value可直取，contenteditable得用element.textContent（防 XSS），富文本需存innerHTML但恢复前必须白名单过滤（只留<strong></strong>、<ul></ul>等）
页面刷新后内容没恢复，恢复逻辑常在哪几个点断掉
恢复失败不是因为没存，而是读得太早、比得不对、赋得不全。最典型是脚本执行顺序和框架生命周期没对齐。
- 别在
<script></script>标签内同步读localStorage.getItem()，此时 DOM 还没渲染，document.getElementById('xxx')返回null - 恢复必须放在
DOMContentLoaded后，或更稳妥地用document.currentScript?.nextElementSibling后立即执行 - 表单带初始
value="default"时，不能只比localStorage值是否非空，得先等字段挂载完成，再取当前value和缓存值做严格相等判断（===，不是==） - Vue/React 项目中，千万别直接操作
input.value，得通过dispatchEvent(new Event('input', { bubbles: true }))触发响应式更新，否则视图不刷新
多个标签页同时编辑同一表单，怎么防止 localStorage 覆盖冲突
同域名下 localStorage 全局共享，A tab 存了草稿，B tab 加载时直接覆盖，用户毫无感知。这不是 bug，是设计使然，必须主动隔离。
立即学习“前端免费学习笔记（深入）”；
- 键名拼入路径哈希或唯一标识，例如
const key = location.pathname + '_draft_' + (new URLSearchParams(location.search).get('id') || 'default') - 更可靠的做法是加时间戳+版本号，如
draft-v2-20260415-102345，每次保存生成新 key，旧 key 不删但加过期标记 - 若需强一致性（如协同编辑），
localStorage不适用，应切到IndexedDB，利用事务和游标支持多写并发控制 - 监听
storage事件可感知其他 tab 的变更，但注意它不触发于当前 tab 的写入，只通知外部变化；可用于提示“其他窗口已更新，请刷新”
beforeunload 里为什么不能判断“是否真有改动”
很多人试图在 beforeunload 回调里读 localStorage、算哈希、比对 DOM，结果在 Safari 直接报错，在 Chrome 卡顿，最终提示不弹、数据不存。
-
beforeunload中禁止异步操作，且localStorage.getItem()在 Safari 无痕模式下会同步抛错，无法捕获 - 真正可靠的“脏状态”必须提前存在内存变量里，例如
window.__isFormDirty = false，每次防抖保存成功后设为false，输入变动时设为true - 该事件只适合做布尔判断：
if (window.__isFormDirty) return undefined（返回字符串已废弃，现代浏览器只认undefined或不返回） - 绑定
beforeunload必须滞后——等用户真实输入后再加监听，否则一进页面就绑，等于强制弹提示，体验极差
最常被绕过的不是技术点，而是“恢复后是否清空 localStorage”。不清理，下次打开还会还原已提交的内容；清理太早，DOM 没挂载完就删，恢复逻辑失效。这个时机差几毫秒，整个防丢失闭环就断了。
