用 localStorage 实现轻量版版本快照面板需用户主动点击保存，每次存 timestamp、summary（DOMParser 提取后截断前 50 字）、content，上限 20 条，超限则 shift() 删除最老项；渲染用语义化 <details><summary> 和 <ol class="edit-history">，对比入口用带 aria-expanded/aria-controls 的按钮，快照必须落库才合规。
HTML 文件本身不存版本历史，所谓“版本历史面板”必须靠前端 JS + 存储机制 + 后端协同实现；纯 HTML 标签（如 <meta> 或注释）写进去的内容浏览器不解析、不索引、不回溯，也压根不会出现在面板里。
怎么用 localStorage 实现轻量版版本快照面板
适合单页编辑器类应用（如 Markdown 编辑器），用户主动点击「保存快照」时触发，不是自动轮询或监听所有输入。
- 每次快照只存三个字段：
timestamp（Date.now()毫秒值）、summary（用DOMParser提取textContent后截断前 50 字）、content（原始 HTML 字符串或结构化数据） - 限制总数 ≤20 条，超出时用
shift()删最老的——localStorage容量小且无自动淘汰 - 渲染列表用
<details><summary>，不用 JS 控制display：天然支持键盘导航、语义清晰、无额外事件绑定开销 - 别直接把快照内容塞进
<pre><code>：它不支持行级差异高亮，<div class="diff-line inserted">这类标记更可控
为什么不能用 history.pushState 做真实版本面板
它只能模拟跳转入口，不能替代版本存储——刷新后 state 丢失，且不保存 HTML 文件本身。
- 调用
history.pushState({ html: document.documentElement.outerHTML }, '', '/editor/v123')会吃内存，长文档一次快照就超 1MB，Chrome 有约 640KB 的state静默截断限制 - 必须手动监听
popstate事件并还原 DOM，否则点浏览器后退按钮毫无反应 -
location.pathname解析出的v123只是 URL 片段，不代表该版本真实存在；得搭配fetch('/api/snapshots/v123')校验有效性 - IE 和部分 iOS WebView 中，
state对象在刷新后恒为空，得 fallback 到sessionStorage补充缓存
怎么渲染带时间戳和作者的编辑历史列表
用语义化 <ol class="edit-history">，每条 <li> 包含 ISO 8601 时间、编辑人、摘要，别用 <div> 模拟列表。
立即学习“前端免费学习笔记（深入）”；
-
datetime属性必须是完整 ISO 字符串（如"2024-05-20T14:22:07Z"），含时区，否则<time>标签无效，JS 也无法可靠解析 - 后端返回 Unix 时间戳时，前端要立刻转成 ISO：
new Date(ts).toISOString()，别等到渲染时再算——避免时区错乱 - 作者字段建议由后端下发（如
author: "zhangsan@company.com"），前端仅展示，不自行拼接“张三（2小时前）”这类模糊文本 - 摘要若含 HTML 标签，必须用
DOMParser清洗后再截断，否则<strong>加粗</strong>会被当作文本计入字数，导致摘要错乱
版本对比入口按钮怎么写才真正可用
入口不是装饰性链接，而是带状态管理、可访问性支持、防重复提交的交互节点。
- 用
<button type="button" data-target="v122-v123" aria-expanded="false" aria-controls="diff-panel-122-123">，aria-expanded和aria-controls必须成对，否则屏幕阅读器无法识别展开状态 -
data-target值统一用短横线分隔（如v122-v123），避免下划线或冒号，JS 正则匹配更稳：target.match(/v(\d+)-v(\d+)/) - 点击后立即设
button.setAttribute('aria-busy', 'true')并disabled，防止网络慢时用户狂点触发多次fetch - 对比结果容器用
<div id="diff-panel-122-123" hidden>，不用display: none——hidden属性天然支持 SSR 降级和无障碍隐藏
最容易被忽略的是：所谓“版本历史”，核心是“谁在什么时候改了什么”，不是“怎么让 HTML 自己记住”。一旦依赖纯前端存储，就要接受 localStorage 被清空即全丢；真要合规留存，快照必须落库，前端只负责拉取和渲染。
