javascript 通过 window.history 操作浏览器历史，支持后退、前进、跳转及修改 url 而不刷新页面；仅限同源操作，无法读取完整历史；pushstate 添加新记录，replacestate 替换当前记录；popstate 监听导航变化并获取 state 数据。
JavaScript 通过 window.history 对象操作浏览器的历史记录，主要用于在不刷新页面的前提下跳转、前进、后退或修改地址栏 URL（影响浏览器地址但不触发页面重载）。它不能读取用户完整的浏览历史（出于隐私限制），只能操作当前站点内由 JS 主动添加或当前会话产生的历史条目。
history.back() / history.forward() / history.go()
这三个方法用于模拟浏览器的“后退”“前进”按钮行为：
-
history.back()：等价于点击后退按钮，跳转到上一个历史记录项 -
history.forward()：跳转到下一个历史记录项（如果存在） -
history.go(n)：跳转到相对当前位置的第 n 条记录（n为整数），例如go(-1)同back()，go(1)同forward()，go(0)刷新当前页（不重新请求，类似 location.reload() 的轻量版）
history.pushState() —— 添加新历史条目
向历史栈中**新增一条记录**，同时更新地址栏 URL（可为同域任意路径），但不触发页面跳转或刷新：
- 语法：
history.pushState(state, title, url) -
state：一个可被序列化的对象，会在后续 popstate 事件中传回（如 { id: 123, from: 'list' }） -
title：目前大多数浏览器忽略该参数，可传空字符串'' -
url：新的相对路径（如'/detail/456'），必须与当前页面同源，否则报错 - 示例：
history.pushState({ page: 'detail' }, '', '/post/789');地址栏变成/post/789，但页面内容需手动更新（比如用 AJAX 渲染）
history.replaceState() —— 替换当前历史条目
和 pushState 类似，但**不新增记录，而是替换当前这一条**。适合更新 URL 却不想让用户多按一次后退键返回旧地址的场景：
立即学习“Java免费学习笔记（深入）”；
- 语法：
history.replaceState(state, title, url) - 常见用途：表单提交后修正 URL、修正带 hash 的路由、清除搜索参数但保留页面状态
- 示例：
history.replaceState(null, '', '?q=js#results');只改地址栏，历史栈长度不变
监听历史变化：popstate 事件
当用户点击后退/前进按钮，或调用 back()/forward()/go() 导致激活的历史条目改变时，会触发 popstate 事件：
- 绑定方式：
window.addEventListener('popstate', (e) => { console.log(e.state); }) -
e.state就是之前用pushState或replaceState传入的 state 对象 - 注意：直接调用
pushState/replaceState不会触发 popstate；只有导航类操作才会触发
基本上就这些。实际开发中常配合前端路由库（如 React Router、Vue Router）使用，它们底层就是封装了这些 API。关键点在于：URL 可变，页面要自己渲染；state 是唯一能跨跳转传递数据的机制；所有操作都受同源策略约束。
