window 對象通過 history 對象提供對覽器歷史記錄的訪問能力。在 HTML5 中，history 對象還具有了操縱瀏覽器歷史記錄的能力。
歷史記錄訪問
length 屬性可以訪問歷史記錄對象的長度。
history.length
forward 和 back 方法如同瀏覽器的前進和后退功能。
history.forward()
history.back()
go 方法可以通過指定一個相對于當前頁面的索引值來跳轉到相應的記錄。
history.go(1) # 等同于 histroy.forward()
hsitory.go(-2)
操縱歷史記錄
就如同你能夠從絕大部分有關 JavaScript 書上看到的，ajax 的風靡讓大眾開始正視 JavaScript 這門語言，然而 ajax 構建的在線應用有一個眾所周知的問題——用戶無法有效利用瀏覽器的后退和前進功能。而這一問題也通過 HTML5 規范得到了有效的解決。通過 pushState 和 replaceState 方法可以允許你添加或修改瀏覽器的歷史記錄。
pushState 方法能夠將當前頁面地址保存為最近一條歷史記錄，同時修改當前頁面地址。但是不會加載該頁面。
假設當前頁面地址為 http://www.example.com/page1，代碼如下：
history.pushState({foo: "bar}, "page 2", "/page2");
history.back(); # 跳轉到 http://www.example.com/page1
代碼示意的過程很簡單，具體看看 pushState 的參數，一共接受三個參數分別是狀態對象、標題和 URL。
URL：其中 URL 為具體的地址（再次說明，修改了地址欄中的地址，但是頁面不會主動加載），可以是相對地址，也可以是絕對地址，但是傳入地址必須與當前地址同源，否則會報錯。
標題：一個簡短的標題，表明要進入的狀態。但是現在的絕大部分瀏覽器都會忽略它，可以傳入空字符串
狀態對象： 一個與創建的歷史記錄相關聯的 JavaScript 對象。當用戶訪問該歷史記錄時，popstatge 事件（下邊有講解）觸發時，該事件對象的 state 屬性就是這個狀態對象的一個拷貝。
值得注意有亮點，其一，使用 history.pushState() 會改變 referrer 的值，而在你調用方法后創建的 XMLHttpRequest 對象會在 HTTP 請求頭中使用這個值。其二，pushState 方法永遠不會觸發hashchange事件，即便新的地址只變更了hash。
replaceState 方法與 pushState 很相似，區別在于它不是創建新的歷史條目，而僅僅是修改當前頁面的地址。
popstate 事件
當歷史條目被訪問時，popstate 事件就會被觸發。window.onpopstate 是 popstate 事件在 window 上的事件句柄。如果當前處于激活狀態的歷史記錄條目是 pushState 方法創建，或者由 replaceState 方法修改過的，則popstate事件對象的state屬性包含了這個歷史記錄條目的state對象的一個拷貝。
window.onpopstate = function(event) {
alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
//綁定事件處理函數.
history.pushState({page: 1}, "title 1", "?page=1"); //添加并激活一個歷史記錄條目 http://example.com/example.html?page=1,條目索引為1
history.pushState({page: 2}, "title 2", "?page=2"); //添加并激活一個歷史記錄條目 http://example.com/example.html?page=2,條目索引為2
history.replaceState({page: 3}, "title 3", "?page=3"); //修改當前激活的歷史記錄條目 http://ex..?page=2 變為 http://ex..?page=3,條目索引為2
history.back(); // 彈出 "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // 彈出 "location: http://example.com/example.html, state: null
history.go(2); // 彈出 "location: http://example.com/example.html?page=3, state: {"page":3}
另外，還有一種能夠訪問 pushState 和 replaceState 綁定狀態對象的方法是，在當前頁面直接調用
history.state
如果當前頁面是通過歷史記錄條目訪問到的，同時該歷史條目還是通過 pushState 和 replace 方法創建的，那么返回的結果就是當時創建時所綁定的狀態對象。
參考資料:
