window.history

一：历史记录概述

前进与后退

一、window.history.back()

二、window.history.forward();

移动到指定的历史记录点

window.history.go(num) num为正向前移动num页，为负则是后退num页。

二： 添加和修改历史记录条目

HTML5引进了history.pushState()方法和history.replaceState()方法，它们容许你逐条地添加和修改历史记录条目。这些方法能够协同window.onpopstate事件一块儿工做。

使用history.pushState()会改变referrer的值，而在你调用方法后建立的XMLHttpRequest对象会在HTTP请求头中使用这个值。referrer的值则是建立XMLHttpRequest 对象时所处的窗口的URL。

 

pushState()方法

pushState()方法有三个参数：一个状态对象，一个标题 ，一个可选的URL地址。 下面来单独考察这三个参数的细节：

　　一、状态对象（state object） 一个javascript对象，与用pushState()方法建立的新历史记录条目关联。不管什么时候用户导航到新建立的状态，popstate时间都会被触发，而且事件对象的state属性都包含历史记录条目的状态对象的拷贝。

任何可序列化的对象均可以被当作状态对象。由于Firefox浏览器会把状态对象保存到用户的硬盘，这样它们就能在用户重启浏览器以后被还原，咱们强行限制状态对象的大小为640k。若是你向pushState()方法传递了一个超过该限额的状态对象，该方法会抛出异常。若是你须要存储很大的数据，建议使用sessionStorage或localStorage。

　　二、标题（title）firefox浏览器目前会忽略该参数，虽然之后可能会用上。考虑到将来可能会对该方法进行修改，传一个空字符串会比较安全。或者，你也能够传入一个简短的标题，标明要进入的状态。（以上都是MDN上的原话，在vue的路由中，有用到这个标题）。

　　三、地址（URL）新的历史记录条目的地址。浏览器不会在调用pushState()方法后加载该地址，但以后，可能会试图加载，例如用户重启浏览器。新的URL不必定是绝对路径；若是是相对路径，它将以当前的URL为基准；传入的URL与当前的URL应该是同源的，不然，pushState()会抛出异常。该参数是可选的；不指定的话则为文档当前URL。

 

某种意义上，调用pushState()有点相似于设置window.location='#foo'，它们都会在当前文档内建立和激活新的历史记录条目。但pushState()有本身的优点：

　　一、新的URL能够是任意的同源URL，与此相反，使用window.location方法时，只有仅修改hash才能停留在相同的document中。

　　二、根据我的需求来决定是否修改URL。相反，设置window.location='#foo'，只有在当前hash值很多foo时才建立一条新的历史记录。

　　二、你能够在新的历史记录条目中添加抽象数据。若是使用基于hash方法，你只能把相关数据转码成一个很短的字符串。

注意pushState()方法永远不会触发hashchange事件，即使新的地址只变动了hash值。

replaceState()方法

history.replaceState()操做相似于history.pushState()，不一样之处在于replaceState()方法会修改当前历史记录条目。当你为了响应用户的某些操做，而要更新当前历史记录条目的状态对象或URL时，使用replaceState()方法会特别合适。

popstate()事件

每当激活历史记录发生变化时，都会触发popstate事件。若是被激活的历史记录条目是由pushState()所建立，或是被replaceState()方法影响到的，popstate事件的状态属性将包含历史记录的状态对象的一个拷贝。

读取当前状态

在页面加载时，可能会包含一个非空的状态对象。这种状况是会发生的，例如，若是页面中使用pushState()或replaceState()方法设置了一个状态对象，而后用户重启了浏览器。当页面从新加载时，页面会触发onload事件，但不会触发popstate事件。可是，若是你读取history.state属性，你会获得一个与popstate事件触发时获得的同样的状态对象。你能够直接读取当前历史记录条目的状态，而不须要等待popstate事件：

var currentState = history.state;