history.state仅返回pushState()/replaceState()设置的状态对象，初始页面为null；popstate事件仅在导航到已有历史项时触发，需监听并校验event.state；state支持结构化克隆但禁用函数/Symbol等，SPA中应以URL为主、state为辅。
history.state 读取当前历史记录的状态对象
页面加载后或用户导航到某个历史记录点时，history.state 就是那个时刻绑定的状态数据。它不是自动更新的，也不包含 URL 或标题信息，只返回你当初用 pushState() 或 replaceState() 传入的第一个参数。
常见错误：直接在页面刚打开时读 history.state，结果是 null —— 因为初始页面没通过 history API 设置过状态，除非服务端已注入或脚本主动调用过 replaceState()。
- 必须确保该历史项确实由
pushState()/replaceState()创建，否则值为null - 不能用于读取浏览器原生前进/后退的目标页状态（比如用户点击地址栏回退到一个未用 history API 操作过的页面）
- 值是浅拷贝，修改它不会影响历史栈中的原始对象
监听 popstate 事件获取导航时的状态变化
用户点击浏览器后退/前进按钮，或调用 history.back() 等方法时，会触发 popstate 事件，事件对象的 state 属性就是目标历史记录的状态数据。
注意：该事件**不会**在 pushState() 或 replaceState() 调用时触发，只响应“导航到已有历史项”的行为。
立即学习“前端免费学习笔记（深入）”；
- 必须用
addEventListener('popstate', handler)注册监听，window.onpopstate兼容性差且不易管理 - 首次页面加载（非导航触发）不派发
popstate，哪怕history.state非空 - 事件处理器中应检查
event.state是否为null，避免解构报错
window.addEventListener('popstate', (event) => {
if (event.state) {
console.log('导航到的状态:', event.state);
// 例如：渲染对应内容、恢复表单字段
} else {
console.log('目标历史项无 state 数据');
}
});pushState() 和 replaceState() 的 state 参数限制
传给 pushState() 或 replaceState() 的第一个参数（即 state）会被序列化为浏览器内部状态，但**不会被 JSON.stringify() 处理** —— 它是直接保存引用（实际由浏览器以结构化克隆算法处理），所以支持 Date、RegExp、Map、Set 等类型（Chrome 105+，Firefox 97+），但仍有明确边界。
- 函数、undefined、Symbol、Promise、window 对象等无法被克隆，传入会静默丢弃对应字段（不报错但值变
undefined） - 过大对象（如百 KB 级 JSON 字符串）可能被截断或导致内存压力，各浏览器无统一上限，建议控制在 64KB 内
- 不要依赖 state 存储敏感数据，它可被 JavaScript 同源脚本任意读取
history.pushState(
{ userId: 123, tab: 'settings', timestamp: new Date() },
'',
'/settings'
);history.state 在 SPA 路由中的典型误用
单页应用常把路由状态全塞进 state，再靠它驱动视图；但一旦用户刷新页面，history.state 丢失（除非服务端配合或用 replaceState() 在加载时重置），导致白屏或状态错乱。
更稳妥的做法是：把关键路由参数保留在 URL（path/query）中，state 只放临时、非关键、不可序列化的数据（比如滚动位置、未提交的草稿引用）。
- URL 是唯一可靠的状态载体，
state是补充，不是替代 - 不要在
popstate处理器里直接修改location.href，这会打断浏览器历史栈，引发循环或丢失状态 - 调试时可用
console.log(history.state)+ 切换标签页再切回来，观察是否重置 —— 这能快速验证 state 持久性
实际用起来最易忽略的一点：没有初始化就假设 history.state 有值，或者把 popstate 当作“所有路由变更”的统一入口，忘了它根本捕获不到 pushState() 自身触发的变化。
