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;