history 对象是 BOM（Browser Object Model）中的一个重要对象，它提供了操作浏览器历史记录的方法，
history.back() 和 history.forward()
- 功能：
history.back()方法用于加载历史记录中的前一个页面，其效果等同于用户点击浏览器的“后退”按钮。history.forward()方法则用于加载历史记录中的下一个页面，类似于用户点击浏览器的“前进”按钮。
- 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>History 对象示例</title>
</head>
<body>
<button onclick="goBack()">后退</button>
<button onclick="goForward()">前进</button>
<script>
function goBack() {
history.back();
}
function goForward() {
history.forward();
}
</script>
</body>
</html>
在上述示例中，通过点击页面上的“后退”和“前进”按钮，分别调用 history.back() 和 history.forward() 方法来实现浏览器历史记录的导航。
history.go()
- 功能：该方法接受一个整数参数，用于在历史记录中向前或向后跳转指定的页面数。正数表示向前跳转，负数表示向后跳转。例如，
history.go(-2)表示向后跳转两个页面，history.go(1)表示向前跳转一个页面。 - 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>History 对象示例</title>
</head>
<body>
<button onclick="goBackTwoPages()">后退两页</button>
<button onclick="goForwardOnePage()">前进一页</button>
<script>
function goBackTwoPages() {
history.go(-2);
}
function goForwardOnePage() {
history.go(1);
}
</script>
</body>
</html>
history.pushState() 和 history.replaceState()
- 功能：
history.pushState()方法用于向浏览器历史记录中添加一个新的状态记录，同时改变当前的 URL，但不会触发页面刷新。这使得开发者可以在不刷新页面的情况下，通过修改 URL 来反映页面的不同状态，并且用户可以使用浏览器的“后退”和“前进”按钮在这些状态之间导航。history.replaceState()方法用于修改当前历史记录的状态信息，同样不会刷新页面。它与history.pushState()的区别在于，它不会在历史记录中添加新的记录，而是直接替换当前记录的状态。
- 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>History 对象示例</title>
</head>
<body>
<button onclick="addHistoryState()">添加历史记录状态</button>
<button onclick="replaceHistoryState()">替换历史记录状态</button>
<script>
function addHistoryState() {
var stateObj = {
page: 'newPage', data: 'Some data' };
history.pushState(stateObj, 'New Page Title', 'new-page.html');
}
function replaceHistoryState() {
var newStateObj = {
page: 'modifiedPage', data: 'Modified data' };
history.replaceState(newStateObj, 'Modified Page Title', 'modified-page.html');
}
</script>
</body>
</html>
在上述示例中，点击“添加历史记录状态”按钮时，使用 history.pushState() 方法添加了一个新的历史记录状态，URL 变为 new-page.html，同时可以传递一个状态对象用于存储相关数据；点击“替换历史记录状态”按钮时，使用 history.replaceState() 方法替换了当前历史记录的状态，URL 变为 modified-page.html。
监听历史记录变化事件
- 当用户通过浏览器的“后退”或“前进”按钮，或者通过
history.pushState()和history.replaceState()方法改变历史记录时，会触发popstate事件。可以通过监听该事件来执行相应的操作，以响应历史记录的变化。 - 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>History 对象示例</title>
</head>
<body>
<script>
window.addEventListener('popstate', function (event) {
console.log('历史记录发生变化，当前状态：', event.state);
// 根据不同的历史记录状态执行相应的操作
});
</script>
</body>
</html>
在上述示例中，通过监听 popstate 事件，可以在历史记录发生变化时获取当前的历史记录状态，并根据状态信息执行相应的逻辑，从而实现与浏览器历史记录的交互和响应。
history 对象的这些方法为开发者提供了强大的工具，用于管理浏览器历史记录和实现无刷新页面导航，尤其在构建单页应用（SPA）等需要复杂页面状态管理的场景中具有重要的应用价值。
