JavaScript中如何操作历史记录_historyAPI

JavaScript中History API通过pushState()、replaceState()和popstate事件实现SPA路由控制：pushState添加历史记录并改URL，replaceState替换当前记录，popstate监听前进/后退并读取state。

JavaScript 中通过 History API 可以在不刷新页面的前提下操作浏览器的历史记录，实现单页应用（SPA）的路由跳转和状态管理。核心方法是 pushState()、replaceState() 和 popstate 事件。

使用 pushState 添加新历史记录

pushState() 会在历史栈中新增一条记录，同时改变 URL（但不触发页面加载）。

• 语法：history.pushState(state, title, url)
• state：一个可序列化的对象，随该记录保存，后续可通过 event.state 获取
• title：目前大多数浏览器忽略此参数，可传空字符串 ""
• url：新的相对或绝对路径（需同源），仅影响地址栏，不发起请求

示例：
history.pushState({page: "about"}, "", "/about");
执行后地址栏变为 /about，点击浏览器“后退”会回到上一页面，且触发 popstate 事件。

用 replaceState 替换当前历史记录

replaceState() 不新增记录，而是替换当前历史项，适合更新状态但不想让用户多按一次“后退”。

• 语法与 pushState 相同：history.replaceState(state, title, url)
• 常用于表单提交后更新 URL，或修正初始 URL（如从 /?ref=abc 清理为 /）

示例：
history.replaceState({search: "js"}, "", "/search?q=js");

监听 popstate 响应浏览器导航

当用户点击前进/后退按钮，或调用 history.back() 等方法时，会触发 popstate 事件，此时可读取 event.state 并更新页面内容。

标签： javascript java html js 前端 浏览器 栈 路由 win 跨域 表单提交