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