pushState和replaceState是H5的API中新新增的兩個方法。通過window.history方法來對瀏覽器歷史記錄的讀寫。

pushState和replaceState

在 HTML 檔案中, history.pushState() 方法向瀏覽器歷史添加了一個狀態。 
pushState() 帶有三個引數：一個狀態物件，一個標題（現在被忽略了），以及一個可選的URL地址。

• state object — 狀態物件是一個由 
  pushState()方法建立的、與歷史紀錄相關的JS物件。當用戶定向到一個新的狀態時，會觸發popstate事件。事件的state屬性包含了歷史紀錄的state物件。（譯者注：總而言之，它儲存JSON字串，可以用在popstate事件中。）state 
  物件可以是任何可以序列化的東西。由於 火狐 
  會將這些物件儲存在使用者的磁碟上，所以使用者在重啟瀏覽器之後這些state物件會恢復，我們施加一個最大640k 
  的字串在state物件的序列化表示上。如果你像pushState() 方法傳遞了一個序列化表示大於640k 
  的state物件，這個方法將扔出一個異常。如果你需要更多的空間，推薦使用sessionStorage或者localStorage。
• title — 
  火狐瀏覽器現在已經忽略此引數，將來也許可能被使用。考慮到將來有可能的改變，傳遞一個空字串是安全的做法。當然，你可以傳遞一個短標題給你要轉變成的狀態。（譯者注：現在大多數瀏覽器不支援或者忽略這個引數，最好用null代替）
• URL — 
  這個引數提供了新歷史紀錄的地址。請注意，瀏覽器在呼叫pushState()方法後不會去載入這個URL，但有可能在之後會這樣做，比如使用者重啟瀏覽器之後。新的URL不一定要是絕對地址，如果它是相對的，它一定是相對於當前的URL。新URL必須和當前URL在同一個源下;否則，pushState() 
  將丟出異常。這個引數可選，如果它沒有被特別標註，會被設定為文件的當前URL。

一些情況下，呼叫pushState和設定 window.location = “#foo”相當，這種狀況下，這兩種行為都會建立和啟用另一個和當前頁面有關的歷史紀錄。但是pushState()有其他優勢：

新URL可以是當前URL同源下的任意地址。相反的，設定window.location會讓你保持在相同頁面，除非你只修改hash. 
如果不必要，你可以不改變URL，相反的，將window.location設定為“#foo”；只會建立一個新的歷史紀錄，如果當前hash不為#foo. 
You can associate arbitrary data with your new history entry. With the hash-based approach, you need to encode all of the relevant data into a short string.你可以關聯任意的資料到你的新歷史紀錄中。使用基於hash的方法，你需要將所有相關 的資料編碼為一個短字串。

請注意pushState()方法絕不會導致hashchange 事件被啟用，即使新的URL和舊的只在hash上有區別。

語法

pushState()和replaceState()引數一樣，引數說明如下：

history.pushState(state, title, url);

• state：儲存JSON字串，可以用在popstate事件中。

• title：現在大多數瀏覽器不支援或者忽略這個引數，最好用null代替

• url：任意有效的URL，用於更新瀏覽器的位址列，並不在乎URL是否已經存在地址列表中。更重要的是，它不會重新載入頁面。

兩個方法的主要區別：pushState()是在history棧中新增一個新的條目，replaceState()是替換當前的記錄值。

popstate

當前活動歷史項(history entry)改變會觸發popstate事件。呼叫history.pushState()建立新的歷史項(history entry)，或呼叫history.replaceState()替換新的歷史項(history entry)，那麼popstate事件的state屬性會包含歷史項(history entry)狀態物件(state object)的拷貝。

需要注意的是呼叫history.pushState()或history.replaceState()不會觸發popstate事件。只有在做出瀏覽器動作時，才會觸發該事件，如使用者點選瀏覽器的回退按鈕（或者在Javascript程式碼中呼叫history.back()）

不同的瀏覽器在載入頁面時處理popstate事件的形式存在差異。頁面載入時Chrome和Safari通常會觸發(emit )popstate事件，但Firefox則不會。

當瀏覽器觸發返回和前進時觸發：

window.onpopstate = function(e) {

       console.log(e.state);
   };

參考：https://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/