真正防丢失需本地缓存+服务端心跳+用户可感知状态三层叠加：sessionstorage防刷新，localstorage定时带版本号同步，服务端异步保存并校验etag，界面实时显示保存状态并beforeunload兜底。

HTML 自动保存本身不防丢失，它只是把当前页面状态写进本地存储（如 localStorage），关掉标签页或刷新后能恢复——但一旦用户清缓存、换设备、或页面 JS 报错中断，就彻底丢数据。

为什么 localStorage 自动保存经常“看似有效实则失效”

很多前端自动保存方案只依赖 localStorage.setItem('draft', content)，但实际场景中失效频繁：

• 用户手动点了「清除浏览数据」→ localStorage 清空，无提示、无备份
• 页面加载时 localStorage 读取早于编辑器初始化 → 恢复逻辑执行失败，内容白屏
• 富文本编辑器（如 quill 或 tiptap）的内部状态比纯 HTML 复杂得多，直接存 innerHTML 会丢光标、选区、自定义节点
• 多个标签页同时编辑同一份草稿 → localStorage 覆盖冲突，后保存者覆盖前者的修改

真正防丢失必须分层：本地缓存 + 服务端心跳 + 用户可感知状态

单靠前端自动保存是脆弱的。可靠方案要叠加三层：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 本地层：用 sessionStorage 存实时输入（防止意外刷新），再定时（如每 30s）同步到 localStorage，并加时间戳和版本号（draft_v2_202405211422）避免覆盖
• 服务端层：编辑器聚焦时发起轻量 POST /api/draft/heartbeat，带 etag 校验；每次保存触发一次异步提交，成功后更新本地 lastSavedAt
• 用户层：在编辑器右上角显示「已保存」「保存中…」「⚠️ 未同步（离线）」三种状态，点击可手动触发重试；关闭页面前用 beforeunload 弹确认（仅当 localStorage 内容比服务端新时）

beforeunload 不是万能的，但它是最容易被忽略的兜底开关

很多人以为监听 beforeunload 就能拦住所有关闭，其实限制极多：

• Chrome 只允许返回字符串（且现代版本已屏蔽自定义文案），仅能触发浏览器默认提示「确定要离开此页面吗？」
• 该事件不触发于 location.replace、Service Worker 控制的跳转、或 PWA 后台终止
• 关键点：必须在用户有真实输入后才绑定监听（比如监听 input 或 keydown 后设 let hasUnsaved = true），否则一打开页面就弹，体验极差
• 搭配使用：visibilitychange 监听标签页切走又切回，若期间服务端保存成功，就自动清除本地草稿，避免冗余

防丢失不是「有没有自动保存」的问题，而是「哪一层断了，下一层能否顶上，并让用户知道」。最常被绕过的环节，其实是服务端保存失败后没降级到本地持久化提示，以及多端编辑时完全没做冲突标识。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！