html 的 window.history 不支持操作回溯，仅记录 url 跳转；真实回溯需手动保存状态快照，如表单值、dom 变更等，并独立维护操作栈。
不需要。HTML 本身的历史记录（window.history）不提供操作回溯能力，它只记录 URL 跳转，不是用户编辑、表单输入或 DOM 变更的操作快照。
history.back() 和 history.go(-1) 只能退到上一个 URL
它们依赖浏览器历史栈，但这个栈里存的只是地址，不是数据状态。用户点过外链、刷新页面、新开标签，都会打断链路——此时调用 history.back() 可能跳到完全无关的页面，甚至空白页。
- 常见错误现象：点击“撤销”按钮后页面跳转到登录页、404 或首页，而不是回到上一步编辑状态
- 适用场景仅限于纯导航跳转（如 SPA 路由），且必须全程用
pushState/replaceState管理 URL -
history.length不可靠：初始页面、file://协议、跨域 iframe 都会导致值为 0 或异常 - 性能影响小，但语义错位：把“URL 历史”当“操作历史”用，逻辑上无法支撑真实回溯需求
操作回溯必须手动保存状态快照
真正的回溯（比如撤回一次输入、还原被删的表格行、恢复表单某字段值）需要在每次关键变更前，把当前可序列化状态存进数组，而不是依赖浏览器栈。
- 表单字段建议存
form.elements[i].value和form.elements[i].checked，别存form.innerHTML（会丢事件绑定和光标位置） - contenteditable 元素要禁用原生
Ctrl+Z：event.ctrlKey && (event.key === 'z' || event.key === 'y')，否则 JS 撤销和浏览器行为冲突 - 用
structuredClone()深拷贝状态对象；若需兼容旧浏览器，改用JSON.parse(JSON.stringify(obj))，但注意 Date、RegExp、undefined 会被丢弃 - 设置上限（如 50 步），避免内存泄漏：
if (stack.length > 50) stack.shift()
popstate 事件不能替代操作回溯
它只响应用户点击浏览器前进/后退按钮，或调用 history.go() 等导航行为，和你是否执行过“删除一行”“修改文本”完全无关。
- 监听
popstate后，event.state里拿到的是你上次pushState({ ... })传进去的对象，不是自动捕获的 DOM 变更 - 如果你没在每次操作时调用
pushState，那popstate根本不会触发，或者触发时event.state是null - URL 必须同源，
file://协议下所有pushState/replaceState都静默失败 - 不要在
popstate回调里直接还原 DOM——它只该负责路由切换；操作回溯逻辑得单独维护一套栈
最常被忽略的一点：操作回溯和 URL 历史是两套独立系统。你可以同时用 pushState 更新地址栏，又用另一个数组管理输入快照，但两者不自动同步。混用却不隔离，就会出现“点了后退，URL 变了，内容却没变”或者“点了撤销，内容变了，URL 还卡在最新版”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
