Web History Api 记录

一、 常用方法

1.1 history.back()

在 history 中向后跳转，和点击浏览器回退按钮的效果相同。

window.history.back();
 

1.2 history.forward()

在 history 中向前跳转，和点击浏览器前进按钮的效果相同。

window.history.forward();
 

1.3 history.go()

在 history 中跳转到指定的一个点，点的位置通过与当前页面相对位置来标志 (当前页面的相对位置标志为0)，前进为正，后退为负。

// 向后移动一个页面 ，等同于调用 back()
window.history.go(-1);
// 向前移动一个页面 ，等同于调用 forward()
window.history.go(1);

// 向后/前移动两个页面
window.history.go(-2);
window.history.go(2);
 

可以使用 window.history.length 来确定当前历史堆栈中页面的数量

二、pushState 和 replaceState

pushState() 和 replaceState() 会修改浏览器的 URL，但是浏览器并不会立即加载这个 URL 对应的页面，即改变 URL 而不刷新页面。

2.1 history.pushState()

window.history.pushState(state, title, url);
 

参数说明：

• state: 一个与添加的记录相关联的状态对象，主要用于 popstate 事件。该事件触发时，该对象会传入回调函数。也就是说，浏览器会将这个对象序列化以后保留在本地，重新载入这个页面的时候，可以拿到这个对象。如果不需要这个对象，此处可以填 null。
• title: 新页面的标题。但是，现在所有浏览器都忽视这个参数，所以这里可以填空字符串。
• url: 新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

假定当前网址是 http://localhost:8000/1.html 使用 pushState() 方法在浏览记录（history 对象）中添加一个新记录。

var stateObj = { foo: 'bar' };
history.pushState(stateObj, 'page 2', '2.html');
 

添加新记录后，浏览器地址栏立刻显示 http://localhost:8000/2.html ， 但并不会跳转到 2.html，甚至也不会检查 2.html 是否存在，它只是成为浏览历史中的最新记录。这时，在地址栏输入一个新的地址( baidu.com )，然后点击了倒退按钮，页面的 URL 将显示 2.html；你再点击一次倒退按钮，URL 将显示 1.html。

总之，pushState() 方法不会触发页面刷新，只是导致 history 对象发生变化，地址栏会有反应。

使用该方法之后，就可以用 history.state 属性读出状态对象。

var stateObj = { foo: 'bar' };
history.pushState(stateObj, 'page 2', '2.html');
console.log(history.state); // {foo: "bar"}
 

2.2 history.replaceState()

replaceState() 方法用来修改 history 对象的当前记录，其他都与 pushState() 方法一模一样。

三、popstate 事件

每当同一个文档的浏览历史（即 history 对象）出现变化时，就会触发 popstate 事件。

注意，仅仅调用 pushState() 方法或 replaceState() 方法 ，并不会触发该事件，只有用户点击浏览器倒退按钮和前进按钮，或者使用 JavaScript 调用 history.back()、history.forward()、history.go() 方法时才会触发。另外，该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发。

window.onpopstate = function (event) {
  console.log('location: ' + document.location);
  console.log('state: ' + JSON.stringify(event.state));
};
 

回调函数的参数是一个 event 事件对象，它的 state 属性指向 pushState 和 replaceState 方法为当前 URL 所提供的状态对象（即这两个方法的第一个参数）。

四、参考

• developer.mozilla.org/zh-CN/docs/…
• javascript.ruanyifeng.com/bom/history…