HTML 无法自动保存历史版本，需结合 localStorage 或 IndexedDB 存储快照，每个快照含时间戳、摘要和内容，限制20条并自动淘汰最老版本，渲染时用 DOMParser 清洗摘要、toLocaleString 格式化时间、details/summary 实现折叠列表，还原时禁用 innerHTML 改用 insertAdjacentHTML 并转义文本。
怎么用 HTML 存储笔记的历史版本快照
纯 HTML 本身做不到自动保存历史版本——它没有本地数据库、不执行逻辑、也不访问文件系统。所谓“HTML 实现”，实际是靠搭配 localStorage 或 IndexedDB 在浏览器里存多份快照，再用 HTML 渲染成时间点+摘要列表。
关键不是写多少 HTML 标签，而是设计好版本数据结构和触发时机。
- 每次用户手动点击「保存快照」或编辑后停留超 30 秒，才存一次（避免频繁写入
localStorage导致卡顿） - 每个快照至少包含：
timestamp（毫秒时间戳）、summary（前 50 字截断 + 省略号）、content（完整 HTML 字符串或纯文本） - 限制最多存 20 条，超出时删最老的——
localStorage容量小（通常 5–10MB），且无过期机制
如何渲染时间点+摘要列表（含时间格式化）
列表本质是遍历存储的快照数组，用 new Date(timestamp).toLocaleString() 转成可读时间。别直接用 Date().toString()，它在不同系统显示格式不一致（比如 Safari 和 Chrome 的时区标注位置不同）。
- 摘要生成必须做 HTML 解析清洗：先用
DOMParser转成文档，再取textContent截断，避免把<strong>加粗</strong>这类标签字符算进摘要 - 时间戳建议统一用毫秒（
Date.now()），别存new Date().toISOString()字符串——后者难排序、占空间大 - 列表项用
<details><summary>实现折叠展开，比 JS 控制显隐更轻量，也支持键盘导航
为什么不能只靠 localStorage 做长期快照
localStorage 是同步阻塞 API，存大文本（比如带图片 base64 的笔记）会明显卡 UI；而且它没事务、无索引、无法搜索——想查“上周五修改过的所有快照”，只能全量遍历解析。
立即学习“前端免费学习笔记（深入）”；
- 单条快照超过 100KB 就可能触发部分浏览器的写入警告（尤其 iOS Safari）
- 用户清缓存时，
localStorage和快照一起消失，毫无提示 - 真正需要保留历史的场景（如协作编辑、合规存档），必须走服务端接口，前端只负责展示已有快照
点击某个快照还原时，怎么避免内容错乱
还原不是简单 innerHTML 赋值。如果原始笔记用了 contenteditable，直接塞 HTML 可能破坏光标位置、丢失事件绑定，甚至执行意外的 <script>（虽然现代浏览器已默认不执行动态插入的 script，但风险仍在）。
- 还原前先清空编辑器 DOM，再用
insertAdjacentHTML('beforeend', snapshot.content)替代innerHTML = ... - 若快照存的是纯文本，还原时需转义特殊字符（
&→&），否则破坏 HTML 结构 - 务必检查
snapshot.content是否为空或null——常见于用户刚新建笔记就点快照，此时应禁用还原按钮或给默认文案
时间点列表看着简单，但每条快照背后都牵扯存储策略、文本清洗、DOM 安全还原三个层面。最容易被跳过的，是摘要生成时没剥离 HTML 标签——结果列表里全是“<p>今天…</p>”，而不是干净的“今天…”。
