history新特性pushState、replaceState

history，就是歷史記錄，h5的新特性是加入了pushState與replaceState,個人理解是改變location的hash值作到無刷新頁面的路由跳轉，而且攜帶了state的相關狀態信息。

先對history先做一個簡要說明。

history.back()就是回退；這個方法會像用戶點擊了瀏覽器工具欄上的返回鍵同樣。
history.forward()是前進一頁；
history.go(n)根據n的值來瀏覽器來處理前進一頁仍是後退一頁,當n=0時，此時是刷新頁面；

此時再說一下popstate方法；MDN的概要是這麼說的：

popstate窗口上事件的事件處理程序。

popstate每次活動歷史記錄條目在同一文檔的兩個歷史記錄條目之間改變時，將事件分派到窗口。若是被激活的歷史記錄條目是經過調用建立的，
history.pushState()或者被調用影響history.replaceState()，
則popstate事件的state屬性包含歷史條目的狀態對象的副本。

 簡單理解就是：

pushState,replaceState都不會觸發popstate的方法，僅當用戶在相同文檔的兩個歷史條目之間導航時才觸發事件。若是當下有多個歷史記錄，back(),go(n)觸發了路由哈希的改變，就會觸發該事件。

window.onpopstate = function(event) {
  console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

咱們來打開頁面看下history

發現這個時候history的length是 1,state是null;下面咱們來使用一下pushState，

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

此時的history變成這樣

咱們發現state中有了page的值，就是咱們pushState傳入的狀態值，而且length+1了；

而後咱們再pushState一次效果是這樣，說明每次pushState會改變state的值，而且會讓history的棧裏面多推入一個。額，也不知道形容的對不對，我猜你們應該懂我想表達的意思。

下面說一下replaceState，其實跟pushState差很少，只是replaceState()修改當前歷史記錄條目，而不是建立一個新的。

history.replaceState({page: 4}, "title 4", "?page=4");

 

能夠看到length沒有改變，只是修改了history的state的page值。

總結：pushState也就是往history裏放一個狀態值，而且建立一個新的歷史記錄；replaceState修改history的狀態值，不建立新的歷史記錄。popstate只在歷史記錄發生哈希值改變的狀況下觸發。

 本文是基於以下連接作的自我解讀，如若理解有誤，還請指出。你們共同窗習進步。

連接：https://developer.mozilla.org/en-US/docs/Web/API/History_API