js中history对象

本文介绍: 在上面的代码中，调用 pushSt a t e 方法设置了一个状态对象，其中包含了一个名为page的属性，值为“index“，将URL地址改变为/index.html。随后监听了popstate 事件，当调用 b ack 方法回到上一个历史记录时，popstate 事件会被触发，可以在事件处理函数中获取到当前历史记录的状态对象，通过JSON.stringify方法将其序列化为字符串输出到控制台中。在上面的示例中，当用户在浏览器中点击后退按钮时，popstate 事件将被触发，并且状态对象将被输出到控制台。

在 JavaScri p t 中，history 对象表示浏览器窗口的历史记录，允许你在用户在浏览器中访问过的 URL 之间进行前进和后退的导航。history 对象是 Wi nd ow 对象的属性，所以在浏览器环境中直接访问即可。

history 对象提供了一系列用于操作历史记录的方法和属性，其中最常用的是以下几个：

b ack(): 后退一页，相当于用户点击浏览器的“后退”按钮。

forward(): 前进一页，相当于用户点击浏览器的“前进”按钮。

go(n): 前进或后退 n 页，n 为负数表示后退，正数表示前进。

pushStat e(state, title, url): 将一个新的状态添加到历史记录中，并将当前 URL 替换为指定的 URL。

replaceState(state, title, url): 将当前状态替换为新的状态，并将当前 URL 替换为指定的 URL。

其中 pushState() 和 re placeState() 是 HTML5 新增的方法，它们可以在不刷新页面的情况下修改 URL 和浏览历史记录。当这两个方法被调用时，会触发一个 popstate 事件，可以通过 window.addEventLi stener(‘popstate‘, function(){ … }) 来监听。

除了方法之外，history 对象还有一些属性可以供我们使用，比如：

length: 返回历史记录中的页面数量。

state: 返回当前历史记录条目的状态对象。

需要注意的是，history 对象只能访问到与当前页面在同一个浏览器窗口打开的页面的 URL 历史记录，无法访问到其他窗口的 URL 历史记录。此外，history 对象的一些方法（如 pushState 和 re placeState）在旧版浏览器中不被支持，需要进行兼容处理。

b ack，forward

下面是一个简单的例子，演示如何使用 history 对象：

<!DOCTYPE html&gt;
<html&gt;
<head&gt;
    <title&gt;History Object Example</title&gt;
    <script&gt;
        functiongoBack() {
            history.back();
        }
        
        functiongoForward() {
            history.forward();
        }
    </script&gt;
</head&gt;
<body&gt;
    <buttononclick="goBack()"&gt;Back</button>
    <buttononclick="goForward()">Forward</button>
</body>
</html>

这个例子创建了两个按钮，一个用于回到历史记录中的上一个页面，另一个用于前进到历史记录中的下一个页面。在这两个按钮的 onclick 事件中，我们调用了 hi story.b ac k() 和 hi story.forward() 方法来实现这些功能。

state状态作用

当调用 pushState或re placeState方法时，可以通过第一个参数设置一个状态对象，该对象会被保存到浏览器的历史记录中。当调用 back、forward、go等方法时，历史记录会发生改变，同时也会触发 window的popstate 事件，可以通过该事件获取当前历史记录的状态对象。

下面是一个简单的例子，通过 pushState方法设置一个状态对象，并监听 pop state 事件获取状态对象：

// 设置状态对象并将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();

在上面的代码中，调用pus hState方法设置了一个状态对象，其中包含了一个名为page的属性，值为”index“，将URL地址改变为/index.html。随后监听了pop state事件，当调用back方法回到上一个历史记录时，pop state事件会被触发，可以在事件处理函数中获取到当前历史记录的状态对象，通过JSON.stringify方法将其序列化为字符串输出到控制台中。

pus hState()，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/new page.html。但是，这个新的历史记录条目并不会导致浏览器进行实际的页面刷新，因为 pushState() 方法只是将一个新的状态添加到浏览器历史记录中。

与 pushState() 方法不同，replaceState() 方法会修改当前历史记录条目的状态，而不会创建新的历史记录条目。它的参数和 pushState() 方法一样，但是不会创建新的历史记录条目。相反，它会将当前的历史记录条目替换为一个新的状态。

举一个例子：

conststateObj= { foo: 'bar' };
consttitle='新页面标题';
consturl='http://example.com/newpage.html';

history.replaceState(stateObj, title, url);

上面的代码将修改当前的历史记录条目，将其状态改为 { foo: ‘bar’ }，标题改为 ‘新页面标题’，URL 改为 http://exa mple.com/new page.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"}
});