JS 的 history 对象

JavaScript

概述

浏览器器窗口有一个 history 对象，用来保存浏览历史。

最常用属性：length

history.length;
// 3

history 是不可遍历的。

最常用方法：

• back()：移动到上一个访问页面，等同于浏览器的后退键。
• forward()：移动到下一个访问页面，等同于浏览器的前进键。
• go()：接受一个整数作为参数，移动到该整数指定的页面，比如 go(1) 相当于 forward()，go(-1) 相当于 back()，go(0) 相当于刷新当前页面。

不要使用 history 的 back() 方法来实现登陆后返回的功能！！！

pushState & replaceState

这两个方法是 HTML5 为 history 新增的，用来在浏览历史中添加和修改记录。

history.pushState() 方法接受三个参数，依次为：

• state：一个与指定网址相关的 状态对象，popstate 事件触发时，该对象会传入 回调函数。如果不需要这个对象，此处可以填 null。
• title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填 null。
• url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

注意：
pushState() 方法不会触发页面刷新；
如果设置了一个非同域的网址，则会报错。

history.replaceState() 方法的参数与 pushState() 方法一模一样，用于修改浏览历史中当前页面的值。

state

history.state 属性保存当前页面的 state 对象。是使用 pushState 或 replaceState 方法的第一个参数设置的对应页面专属的一个对象值。

history.pushState({page: 1}, "title 1", "?page=1");
history.state
// { page: 1 }

popstate事件

每当同一个文档的浏览历史（即 history 对象）出现变化时，就会触发 popstate 事件。需要注意的是，仅仅调用 pushState 方法或 replaceState 方法 ，并不会触发该事件（只是设置好这个 state 属性），只有用户点击浏览器倒退按钮和前进按钮，或者使用 JavaScript 调用 back、forward、go 方法时才会触发。

另外，该事件只针对同一个窗口中的历史记录，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发。

window.onpopstate = function(event) {
  console.log("location: " + document.location);
  console.log("state: " + JSON.stringify(event.state)); 
  // event.state 即为通过pushState和replaceState方法，为当前url绑定的state对象。
};
// location: http://ce.sysu.edu.cn/
// state: {"paghe":0}