History API通过pushState/replaceState实现无刷新URL修改与历史管理，支持SPA路由、搜索关键词同步、画廊分页及表单步骤导航，需监听popstate恢复状态并注意同源限制。
History API 允许网页在不刷新页面的前提下修改浏览器地址栏的 URL，并操控会话历史记录，核心用途是实现单页应用（SPA）中的无刷新路由跳转和用户体验优化。
修改当前 URL 而不触发页面重载
使用 history.pushState() 或 history.replaceState() 可更新地址栏，同时保存状态对象。两者区别在于：pushState 会在历史栈中新增一条记录，replaceState 则替换当前记录。
-
pushState(state, title, url)：适合前进/后退导航，例如点击“商品详情”后更新为
/product/123 - replaceState(state, title, url)：适合修正 URL（如去除冗余参数），不希望用户通过后退返回到旧地址时使用
- title 参数目前多数浏览器忽略，可传空字符串；url 必须同源，否则报错
响应浏览器前进/后退按钮
监听 popstate 事件，即可捕获用户点击前进、后退或调用 history.back() 等操作：
- 该事件只在历史记录切换且由 pushState/replaceState 添加的条目间触发
-
回调函数中可通过
event.state获取之前存入的状态对象，用于恢复页面视图或数据 - 需注意：页面首次加载不会触发 popstate，需在初始化时手动处理当前 URL
管理历史栈与调试技巧
可通过 history.length 查看当前会话的历史条目数，用 history.state 读取当前条目的状态对象（仅限 push/replace 设置过的）。
- 开发中可在控制台执行
history.pushState({page: 'test'}, '', '?debug=1')快速测试 - 配合
location.pathname和URLSearchParams解析 URL，实现基于路径的路由分发 - 避免滥用：频繁调用 pushState 可能导致历史栈过深，影响用户操作直觉
常见用途与实际场景
History API 是现代前端路由的基础支撑，典型应用包括：
- 单页应用中切换视图（如 React Router、Vue Router 的底层机制）
- 搜索页保留关键词并同步 URL（输入“笔记本”后 URL 变为
/search?q=笔记本） - 图片画廊点击下一张时更新 URL 为
/gallery/5，支持直接分享或刷新访问 - 表单多步骤流程中，每步对应一个 URL，用户可后退修改而不丢失已填内容
