History API 通过 history.pushState() 和 replaceState() 实现无刷新 URL 变更与历史管理，配合 popstate 事件监听导航，支持 SPA 的前进/后退体验；需注意同源限制、state 持久化及刷新兜底。
JavaScript 历史记录 API（History API）是一组允许脚本操作浏览器会话历史的接口，核心是 history 对象。它让你能在不刷新页面的前提下，改变 URL、添加或替换历史条目，从而实现单页应用（SPA）中的“前进/后退”体验。
history.pushState()：往历史栈添加新记录
调用 pushState() 会在当前会话历史中新增一条记录，同时更新地址栏 URL（可跨路径），但不会触发页面跳转或重新加载。
语法：history.pushState(state, title, url)
-
state：一个可序列化的对象，随该历史条目一起保存，后续通过
popstate事件可读取 -
title：目前大多数浏览器忽略此参数，传空字符串或
null即可 - url：新的相对或绝对 URL，必须同源（协议+域名+端口一致），否则报错
例如：history.pushState({page: 'detail', id: 123}, '', '/post/123');
执行后地址栏变为 /post/123，用户点「后退」会回到上一条记录。
history.replaceState()：替换当前历史记录
和 pushState() 类似，但不新增条目，而是直接修改当前历史项的 state 和 URL。
立即学习“Java免费学习笔记（深入）”；
适用场景：表单提交后修正 URL，或初始化时同步 URL 与视图状态（避免多按一次后退回到空白页）。
例如：history.replaceState({page: 'home'}, '', '/');
监听 history 变化：popstate 事件
当用户点击浏览器「前进」「后退」按钮，或调用 history.back()/history.forward() 时，若目标历史项由 pushState 或 replaceState 创建，则触发 popstate 事件。
注意：
- 页面首次加载、或通过普通链接跳转产生的历史项，不会触发 popstate
- 事件对象的 state 属性即当时传入的 state 对象
示例：
window.addEventListener('popstate', (event) => {
const { state } = event;
if (state?.page === 'detail') {
renderDetail(state.id);
}
});其他实用方法
-
history.back()：等价于点击浏览器后退按钮 -
history.forward()：等价于点击前进按钮 -
history.go(n)：跳转到历史栈中第n条记录（n=0刷新，n=-1后退一页） -
history.length：只读属性，返回当前会话历史条目总数（含当前页）
⚠️ 注意：length 不代表可后退步数；且隐私模式下可能受限或返回固定值（如 1）。
基本上就这些。History API 不复杂但容易忽略 state 的合理设计和 popstate 的边界处理——比如页面刷新后 state 丢失，需结合 URL 解析做兜底恢复。
