window.history 和 window.onpopstate 有何关联？
大家好，我是小编小明，今天我们要走进浏览器历史记录的奇妙世界，来聊聊window.history 和 window.onpopstate 这两个神奇的 JavaScript 对象！
一、什么是 window.history？
window.history 对象就像一本浏览器历史记录的日记本。它记录了你当前会话中访问过的所有页面，并提供了操纵浏览器历史记录的方法。
1. window.history 的功能
显示历史记录：history.length 属性可以告诉你当前会话中访问过的页面数量，history.back() 和 history.forward() 方法让你能前后浏览历史记录。
添加历史记录：history.pushState() 和 history.replaceState() 方法允许你添加或替换历史记录项。
监听历史记录更改：window.onpopstate 事件让你能监听历史记录堆栈的更改，例如后退或前进按钮的点击。
2. window.history 的组成部分
window.history 除了方法之外，还包含了很多属性：
二、window.onpopstate 是干嘛的？
| 属性 | 描述 |
|---|---|
| length | 历史记录中项目的数量 |
| state | 上一次压入历史记录项时提供的 state 对象 |
| scrollRestoration | 控制页面在历史记录中导航时的滚动行为 |
| state | 当前历史记录项的状态 |
window.onpopstate 事件，顾名思义，就是在历史记录堆栈发生变化（如后退或前进点击）时触发。
1. window.onpopstate 事件的用途
我们经常在单击浏览器后退按钮时看到页面刷新。如果没有 window.onpopstate 事件，我们就得每次都重新加载页面了，这会非常低效。window.onpopstate 事件让我们可以在历史记录改变时执行自定义代码，从而避免不必要的页面刷新。
2. window.onpopstate 事件的用法
window.onpopstate 事件的语法如下：
window.onpopstate = (event) => {
// 当历史记录更改时执行的代码
event 对象包含以下属性：
三、window.history.pushState() 的作用？
| 属性 | 描述 |
|---|---|
| state | 上一次压入历史记录项时提供的 state 对象 |
| timeStamp | 事件触发时的 Unix 时间戳 |
window.history.pushState() 方法用于在历史记录中创建一个新项目，同时替换当前项目。
1. window.history.pushState() 的语法
window.history.pushState() 的语法如下：
history.pushState(stateObject, title, url);
参数说明：
stateObject：用于存储自定义数据的可选对象。
title：要显示在历史记录中的可选）。
url：要添加到历史记录中的 URL（可选）。
2. window.history.pushState() 的用法
pushState() 方法不会实际加载新页面，它只是在历史记录中添加一个新项目。以下是一个示例：
history.pushState({ id: 1 }, "Product Details", "/product/1");
上面的代码会在历史记录中创建一个新项目，其 stateObject 具有 id: 1 属性，标题为 "Product Details"，URL 为 "/product/1"。
四、window.history.replaceState() 的作用？
window.history.replaceState() 方法与 pushState() 类似，但它会替换当前历史记录项，而不是创建一个新的。
1. window.history.replaceState() 的语法
window.history.replaceState() 的语法与 pushState() 相同：
history.replaceState(stateObject, title, url);
2. window.history.replaceState() 的用法
replaceState() 方法不会添加新项目到历史记录，它只是替换当前项目。以下是一个示例：
history.replaceState({ id: 2 }, "Product Details", "/product/2");
上面的代码将会替换当前历史记录项目，其 stateObject 具有 id: 2 属性，标题为 "Product Details"，URL 为 "/product/2"。
五、window.history 和 window.onpopstate 如何一起使用？
window.history 和 window.onpopstate 事件可以结合使用，实现一些强大而实用的功能，比如单页应用程序（SPA）的状态管理或自定义历史记录导航。
1. SPA 中的状态管理
在 SPA 中，使用 window.history 可以存储页面状态，然后在用户导航到历史记录中的不同页面时恢复。通过在 window.onpopstate 事件处理程序中恢复状态，你可以为用户提供无缝的体验。
2. 自定义历史记录导航
使用 window.history 和 window.onpopstate，你可以自定义浏览器前进和后退按钮的行为。例如，你可以阻止用户离开某些页面，或者在用户点击后退按钮时执行特定的操作。
到这里，大家对 window.history 和 window.onpopstate 有了详细的了解了吗？欢迎在评论区提出问题或分享你使用这些对象的经验。一起探索 JavaScript 的奇妙世界吧！