JavaScript操作浏览器历史只能添加或替换条目，无法修改已有条目；pushState()新增条目，replaceState()覆盖当前条目，均受同源策略限制；popstate事件监听前进/后退，但首次加载不触发。
JavaScript 操作浏览器历史的核心是 history 对象，但直接“修改”已有历史条目是不可能的——你只能在当前会话中添加、替换或后退/前进条目。所有操作都受同源策略约束，且无法读取其他页面的 URL 或标题。
用 history.pushState() 添加新历史条目
这是最常用的操作，用于单页应用（SPA）中模拟页面跳转而不刷新。它会在历史栈中新增一条记录，用户点击返回时可回到上一状态。
-
pushState()不触发页面刷新，也不会验证新 URL 是否真实存在 - 第一个参数是任意状态对象（可为
null），会被序列化后存储，后续通过popstate事件读取 - 第二个参数是 title（目前所有主流浏览器都忽略它，传空字符串或
null即可） - 第三个参数是相对当前 origin 的新 URL（必须同源，否则抛出
SecurityError） - 示例：
history.pushState({page: 'detail'}, '', '/item/123')
用 history.replaceState() 替换当前历史条目
和 pushState() 行为几乎一致，区别在于不新增条目，而是覆盖当前这一条。适合修正 URL（如去掉 hash、补全 query）但不想让用户多一次“返回”机会的场景。
- 参数顺序和含义完全相同
- 常见用途：表单提交后清理 URL 中的临时参数，或初始化 SPA 时修正初始 URL
- 注意：调用后
history.length不变，但history.state和地址栏 URL 会更新 - 示例：
history.replaceState({page: 'home'}, '', '/')
监听 popstate 事件响应浏览器前进/后退
用户点击返回/前进按钮，或调用 history.back() / history.forward() 时，会触发该事件。这是响应式更新页面内容的关键入口。
立即学习“Java免费学习笔记（深入）”；
- 事件对象的
state属性即对应历史条目的状态对象（来自pushState或replaceState的第一个参数） - 该事件不会在首次加载页面时触发，即使页面是通过历史导航进入的
- 不要依赖
event.state做唯一判断——需结合当前 URL 或路由解析逻辑，因为state可能为null（比如用户从外部链接直接进入） - 示例：
window.addEventListener('popstate', (e) => { if (e.state?.page === 'detail') { renderDetail(e.state.id); } });
注意 history.go()、back()、forward() 的实际限制
这些方法看似简单，但行为比想象中更脆弱。
-
history.back()等价于history.go(-1)，但若历史栈中无可跳转项（比如刚打开标签页），它们静默失败，不报错也不提示 - 调用
go(n)时，如果n超出历史栈范围（如go(100)），同样无反应 - 无法得知当前是否处于历史栈“末端”或“起点”，
history.length是只读的，且不包含未来可能的条目（比如还没调用pushState） - 在 iOS Safari 中，某些情况下
popstate可能延迟触发或丢失，建议配合hashchange或定时检测location.href做兜底
真正难的不是调用这几个函数，而是让状态对象、URL、DOM 渲染三者始终同步——尤其在异步加载、错误回滚、嵌套路由等场景下，state 容易过期或与 URL 不一致。别省略对 state 的有效性校验，也别假设用户一定按你预设的路径操作历史栈。
