JavaScript 通过 window.history 操作浏览器历史栈但无法读取 URL 列表或跳转至任意条目；pushState() 新增历史记录，replaceState() 替换当前项；两者均不触发 popstate 事件，仅导航时触发；state 对象刷新后丢失，需配合 sessionStorage 或 URL 参数持久化。
直接说结论：JavaScript 通过 window.history 操作浏览器历史栈，但不能读取 URL 列表或跳转到任意历史条目（出于安全限制），只能前进、后退、替换当前项或推入新状态。
history.pushState() 和 replaceState() 的核心区别
这两个方法都用于修改地址栏 URL 并添加/更新历史记录，但行为不同：
-
pushState()：在历史栈顶部新增一条记录，用户点「后退」会回到上一条 —— 适合单页应用路由跳转（如从 /home → /about） -
replaceState()：不新增记录，而是**替换当前历史项**，用户后退时跳过这一步 —— 适合更新 URL 但不想留下可回退的痕迹（如表单提交后重写 URL，或修正带 hash 的初始路径） - 两者第一个参数都是
state对象（可存任意 JSON 可序列化数据），第二个是标题（多数浏览器忽略），第三个才是 URL（必须同源） - 传入的 URL 不会触发页面刷新，也不会触发服务端请求；仅影响地址栏和历史栈
监听 history 变化要用 popstate 事件
用户点击浏览器「后退」「前进」按钮，或调用 history.back() / history.forward() 时，会触发 popstate 事件，但注意：
- 该事件**只在 history 栈发生「导航」时触发**，
pushState()和replaceState()不会触发它 - 事件对象的
event.state是当时用pushState()或replaceState()存入的 state 对象（可能为null） - 必须用
window.addEventListener('popstate', handler)注册，不能靠onpopstate属性（兼容性差且易被覆盖） - 示例：
window.addEventListener('popstate', (e) => { console.log('当前 state:', e.state); // 如 { page: 'about' } renderPage(e.state?.page || 'home'); });
history.length 和 go() 的实际限制
history.length 返回当前窗口历史栈中所有条目的数量（包括当前页），但它不能告诉你具体有哪些 URL，也不能用来索引跳转：
-
history.go(-1)等价于history.back()，history.go(1)等价于history.forward() -
history.go(n)中的n超出范围（比如n > history.length - 1）时，静默失败，不会报错，但也不起作用 - 无法用
history.go(2)跳到「前两页」，因为中间可能有replaceState()替换过的项，导致栈长度 ≠ 可回退步数 - 移动端 WebView（尤其 iOS）对
go()响应有时延迟或失效，建议优先用back()/forward()明确语义
真正容易被忽略的是：所有 pushState() / replaceState() 写入的 state 对象，在页面刷新后就丢失了 —— 它只存在于内存中，不持久化。如果需要跨刷新保留导航状态，得配合 sessionStorage 或 URL 参数同步处理。
