History API通过pushState、replaceState和popstate实现SPA无刷新导航：pushState添加同源历史条目并更新URL，replaceState替换当前条目，popstate监听浏览器导航以恢复状态。
JavaScript 的 History API 允许你在不刷新页面的前提下操作浏览器的历史记录，实现更流畅的单页应用（SPA）体验。核心在于 history.pushState()、history.replaceState() 和对 popstate 事件的监听。
修改 URL 并添加历史条目（不跳转）
使用 pushState() 可以在历史栈中新增一条记录，同时更新地址栏 URL（仅限同源），但不会触发页面加载。
- 语法：
history.pushState(stateObj, title, url) -
stateObj是一个可序列化的对象，随该历史条目一起保存，后续通过event.state获取 -
title当前大多数浏览器忽略此参数，传空字符串即可（如""） -
url必须与当前页面同源，可以是相对路径（如"./user/123"）或绝对路径
例如：用户点击“查看文章”，你希望 URL 变为 /post/42，但只动态加载内容：
loadPost(42); // 自定义函数，渲染文章内容
替换当前历史条目（不新增）
用 replaceState() 替换当前历史记录，适用于更新状态但不想让用户多按一次“返回”——比如表单提交后修正 URL，或修正初始 URL 中的 hash 参数。
立即学习“Java免费学习笔记（深入）”；
- 语法与
pushState相同：history.replaceState(stateObj, "", newUrl) - 常见场景：SPA 初始化时清理
#路由，改用标准路径；或搜索筛选后更新 URL 但不增加历史深度
例如：页面加载后将 /?q=js#v2 改为干净的 /search?q=js&version=2：
响应浏览器前进/后退操作
当用户点击「返回」或「前进」按钮，或调用 history.back() / history.forward() 时，会触发 popstate 事件，且事件对象的 state 属性包含对应条目的状态对象。
- 必须提前监听：
window.addEventListener("popstate", (e) => { ... }) -
e.state就是当初传入pushState或replaceState的那个对象（可能为null） - 注意：页面首次加载时不会触发
popstate；只有通过浏览器导航（非 JS 跳转）切换历史项才会触发
示例：根据 state 恢复页面状态：
window.addEventListener("popstate", (e) => {if (e.state && e.state.postId) {
loadPost(e.state.postId);
} else if (e.state && e.state.q) {
performSearch(e.state.q);
}
});
