可通过 pushState/replaceState 修改 URL 不刷新页面，并监听 popstate 事件响应返回/前进操作，实现模态框关闭、表单恢复等逻辑；需注意 state 大小限制、同源校验及服务端路由支持。
可以通过 history.pushState() 或 history.replaceState() 修改浏览器地址栏而不刷新页面，再配合监听 popstate 事件，在用户点击返回/前进按钮时执行自定义逻辑（比如关闭模态框、恢复表单、切换标签页等），而不是默认跳转。
使用 pushState/replaceState 记录导航状态
每次触发前端路由变化或界面状态变更时，调用 pushState 存入可序列化的状态对象和 URL：
-
history.pushState({ page: 'detail', id: 123 }, '', '/item/123')—— 添加新历史记录，用户可返回 -
history.replaceState({ page: 'search', q: 'js' }, '', '/search?q=js')—— 替换当前记录，不增加历史长度 - 第一个参数是 state 对象，会在
popstate触发时通过event.state传回 - 第二个参数是 title（目前多数浏览器忽略，可填空字符串）
- 第三个参数是 URL，需同源；建议使用相对路径，避免跨域报错
监听 popstate 事件响应返回/前进操作
在页面初始化时绑定一次监听即可，注意该事件仅在浏览器历史栈变化（如点击返回按钮、history.back()）时触发，不包括 pushState 和 replaceState 调用本身：
- 用
window.addEventListener('popstate', handler)注册处理函数 - 回调中通过
event.state获取之前存入的状态数据 - 根据 state 内容执行对应逻辑：渲染视图、滚动定位、还原表单、关闭弹窗等
- ⚠️ 注意：首次加载页面时不会触发
popstate，如需初始化界面，请手动读取window.location并匹配路由
避免常见陷阱
实际开发中容易忽略几个关键点：
立即学习“前端免费学习笔记（深入）”；
- state 大小限制：不同浏览器对单个 state 对象大小有限制（通常几百 KB），不要存 DOM 节点、函数或大型数据，只放轻量标识信息
- URL 同源校验：传入的 URL 必须与当前页面同源，否则抛出安全错误
- 服务端需支持：如果用户直接访问某个 pushState 生成的 URL（如刷新 /item/123），后端必须能返回同一份 HTML，并由前端 JS 接管路由，否则 404
-
移动端兼容性：iOS Safari 在某些版本中对
popstate触发时机有差异（例如从后台切回可能不触发），建议加兜底检测
一个简单示例：管理模态框开关
点击按钮打开详情模态框时推入历史，点击返回时自动关闭，而非跳转上一页：
- 打开模态框：
history.pushState({ modal: 'detail', id: 456 }, '', '?modal=detail&id=456') - 监听 popstate：
if (event.state?.modal === 'detail') closeModal() - 关闭模态框时调用
history.back()或history.replaceState(null, '', location.pathname)清除状态
