研究history的笔记

大部分来自mdn上原文，可是mdn上顺序叙述不清晰，本身从新整理了一下本身的阅读笔记

window 对象经过 history 对象提供了对浏览器的回话历史的访问。它暴露了不少有用的方法和属性，容许你在用户浏览历史中向前和向后跳转。从HTML5开始——提供了对history栈中内容的操做。

获取当前状态

能够读取当前历史记录项的状态对象state，而没必要等待popstate 事件， 只须要使用history.state 属性

这里引伸出了popstate事件，因此插入讨论一下popstate：

当活动历史记录条目更改时，将触发popstate事件。若是被激活的历史记录条目是经过对history.pushState（）的调用建立的，或者受到对history.replaceState（）的调用的影响，popstate事件的state属性（event.state）包含历史条目的状态对象的副本。

须要注意的是调用 history.pushState()或history.replaceState()不会触发popstate事件。只有在作出浏览器动做时，才会触发该事件，如用户点击浏览器的回退按钮（或者在Javascript代码中调用history.back()）

window.onpopstate = function(event) {
  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
history.replaceState({page: 3}, "title 3", "?page=3");
history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // alerts "location: http://example.com/example.html, state: null
history.go(2);

在history中跳转

使用 back(), forward()和 go() 方法来完成在用户历史记录中向后和向前的跳转。

能够经过查看长度属性的值来肯定的历史堆栈中页面的数量:

window.history.length

添加和修改历史记录中的条目

HTML5引入了 history.pushState() 和 history.replaceState() 方法，它们分别能够添加和修改历史记录条目。这些方法一般与window.onpopstate 配合使用。

使用 history.pushState() 能够改变referrer（报文头，用来指明当前流量的来源参考页），它在用户发送 XMLHttpRequest 请求时在HTTP头部使用，改变state后建立的 XMLHttpRequest 对象的referrer都会被改变。由于referrer是标识建立 XMLHttpRequest 对象时 this 所表明的window对象中document的URL。