在 JavaScript 中，history 对象表示浏览器窗口的历史记录，允许你在用户在浏览器中访问过的 URL 之间进行前进和后退的导航。history 对象是 Window 对象的属性，所以在浏览器环境中直接访问即可。
history 对象提供了一系列用于操作历史记录的方法和属性，其中最常用的是以下几个：
back(): 后退一页，相当于用户点击浏览器的“后退”按钮。
forward(): 前进一页，相当于用户点击浏览器的“前进”按钮。
go(n): 前进或后退 n 页，n 为负数表示后退，正数表示前进。
pushState(state, title, url): 将一个新的状态添加到历史记录中，并将当前 URL 替换为指定的 URL。
replaceState(state, title, url): 将当前状态替换为新的状态，并将当前 URL 替换为指定的 URL。
其中 pushState() 和 replaceState() 是 HTML5 新增的方法，它们可以在不刷新页面的情况下修改 URL 和浏览历史记录。当这两个方法被调用时，会触发一个 popstate 事件，可以通过 window.addEventListener('popstate', function(){ ... }) 来监听。
除了方法之外，history 对象还有一些属性可以供我们使用，比如：
length: 返回历史记录中的页面数量。
state: 返回当前历史记录条目的状态对象。
需要注意的是，history 对象只能访问到与当前页面在同一个浏览器窗口打开的页面的 URL 历史记录，无法访问到其他窗口的 URL 历史记录。此外，history 对象的一些方法（如 pushState 和 replaceState）在旧版浏览器中不被支持，需要进行兼容处理。
back，forward
下面是一个简单的例子，演示如何使用 history 对象：
<!DOCTYPE html>
<html>
<head>
<title>History Object Example</title>
<script>
functiongoBack() {
history.back();
}
functiongoForward() {
history.forward();
}
</script>
</head>
<body>
<buttononclick="goBack()">Back</button>
<buttononclick="goForward()">Forward</button>
</body>
</html>
这个例子创建了两个按钮，一个用于回到历史记录中的上一个页面，另一个用于前进到历史记录中的下一个页面。在这两个按钮的 onclick 事件中，我们调用了 history.back() 和 history.forward() 方法来实现这些功能。
state状态作用
当调用pushState或replaceState方法时，可以通过第一个参数设置一个状态对象，该对象会被保存到浏览器的历史记录中。当调用back、forward、go等方法时，历史记录会发生改变，同时也会触发window的popstate事件，可以通过该事件获取当前历史记录的状态对象。
下面是一个简单的例子，通过pushState方法设置一个状态对象，并监听popstate事件获取状态对象：
// 设置状态对象并将URL改变为/index.html
history.pushState({page: "index"}, "Index", "/index.html");
// 监听popstate事件
window.addEventListener("popstate", function(event) {
console.log("location: "+document.location+", state: "+JSON.stringify(event.state));
});
// 调用back方法回到上一个历史记录
history.back();
在上面的代码中，调用pushState方法设置了一个状态对象，其中包含了一个名为page的属性，值为"index"，将URL地址改变为/index.html。随后监听了popstate事件，当调用back方法回到上一个历史记录时，popstate事件会被触发，可以在事件处理函数中获取到当前历史记录的状态对象，通过JSON.stringify方法将其序列化为字符串输出到控制台中。
pushState()，replaceState()
pushState() 方法将一个新的状态添加到浏览器历史记录中，而不会导致浏览器进行实际的页面刷新。它接受三个参数：state、title 和 url。其中，state 参数是一个 JavaScript 对象，用于保存当前状态的数据；title 参数是一个字符串，表示新的历史记录条目的标题，目前大多数浏览器都忽略这个参数；url 参数是一个字符串，表示新的历史记录条目的 URL。
举一个例子：
conststateObj= { foo: 'bar' };
consttitle='新页面标题';
consturl='http://example.com/newpage.html';
history.pushState(stateObj, title, url);
上面的代码将创建一个新的历史记录条目，其状态为 { foo: 'bar' }，标题为 '新页面标题'，URL 为 http://example.com/newpage.html。但是，这个新的历史记录条目并不会导致浏览器进行实际的页面刷新，因为 pushState() 方法只是将一个新的状态添加到浏览器历史记录中。
与 pushState() 方法不同，replaceState() 方法会修改当前历史记录条目的状态，而不会创建新的历史记录条目。它的参数和 pushState() 方法一样，但是不会创建新的历史记录条目。相反，它会将当前的历史记录条目替换为一个新的状态。
举一个例子：
conststateObj= { foo: 'bar' };
consttitle='新页面标题';
consturl='http://example.com/newpage.html';
history.replaceState(stateObj, title, url);
上面的代码将修改当前的历史记录条目，将其状态改为 { foo: 'bar' }，标题改为 '新页面标题'，URL 改为 http://example.com/newpage.html。但是，这个修改并不会导致浏览器进行实际的页面刷新，因为 replaceState() 方法只是将当前的历史记录条目的状态替换为一个新的状态。
如何监听，通过history对象的页面跳转
要监听history对象的页面跳转，可以使用window对象上的popstate事件来实现。当用户使用前进/后退按钮导致history对象状态发生变化时，popstate事件会被触发。
可以通过使用window对象的addEventListener方法来添加popstate事件监听器，如下所示：
window.addEventListener('popstate', function(event) {
// do something when the history state changes
});
在事件处理程序中，可以使用history.state属性来访问当前状态对象。例如，可以将一个状态对象与每个pushState()方法一起存储，然后在popstate事件处理程序中访问它，以确定何时应该更新页面内容。
例如，以下代码演示了如何将一个简单的状态对象与pushState()一起使用，并在popstate事件处理程序中访问它：
conststateObj= { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");
window.addEventListener('popstate', function(event) {
console.log(event.state); // outputs: {foo: "bar"}
});
在上面的示例中，当用户在浏览器中点击后退按钮时，popstate事件将被触发，并且状态对象将被输出到控制台。
版权归原作者 学不会只能哭 所有， 如有侵权，请联系我们删除。