JavaScript 的 history API 通过 pushState()、replaceState() 和 popstate 事件实现无刷新路由；pushState() 添加新记录并更新 URL，replaceState() 替换当前记录，popstate 事件监听前进/后退，需服务端 fallback 配合。
JavaScript 提供了 history 对象来操作浏览器的历史记录，核心方法是 pushState()、replaceState() 和 popstate 事件。它们能实现无刷新跳转、更新 URL 而不重载页面，常用于单页应用（SPA）的路由管理。
用 pushState() 添加新历史记录
pushState() 会在历史栈中新增一条记录，同时改变地址栏 URL（可选），但不会触发页面刷新。
语法：history.pushState(state, title, url) state：一个可序列化的对象，随该记录保存，后续通过 event.state 获取 title：目前大多数浏览器忽略此参数，传空字符串 "" 即可 url：新的相对路径（如 "/user/123"），必须同源，否则报错
例如：history.pushState({id: 123}, "", "/profile"); 会把 /profile 加入历史栈，当前页面仍显示原内容。
用 replaceState() 替换当前历史记录
replaceState() 不新增记录，而是替换当前这一条，适合更新 URL 或 state 但不想让用户多按一次“后退”。
立即学习“Java免费学习笔记（深入）”；
语法与 pushState 相同：history.replaceState(state, "", "/settings") 常见用途：表单提交后修正 URL、动态更新搜索参数（如 ?q=js&page=2）
监听 popstate 事件响应浏览器前进/后退
用户点击“后退”或“前进”按钮时，若目标历史记录由 pushState 或 replaceState 创建，就会触发 popstate 事件。
绑定方式：window.addEventListener("popstate", (e) => { console.log(e.state); }) e.state 就是当初传入 pushState 或 replaceState 的 state 对象 注意：直接访问新 URL（如手动输入并回车）或页面首次加载时，不会触发 popstate
补充说明和注意事项
history API 操作的是当前 tab 的会话历史，不影响其他标签页；所有操作都受同源策略限制。
不能删除或清空历史记录，也不能跳转到非同源 URL history.go(n)、history.back()、history.forward() 仍可用，但它们会触发完整页面导航（除非配合 SPA 自行拦截） 服务端需配置 fallback：当用户直接访问 /user/123 时，应返回主 HTML 文件，由前端路由接管渲染
基本上就这些。不复杂但容易忽略 state 的持久性和服务端配合，实际项目中建议封装成路由模块统一管理。
以上就是如何用Javascript操作浏览器历史记录？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1542870.html
微信扫一扫 
支付宝扫一扫 
