history對象之pushState，replaceState
瀏覽器有一個history對象，用來保存瀏覽歷史，用戶可以通過點擊瀏覽器的後退或前進按鈕在歷史記錄中切換。之前對history的操作的API主要是前進、後退、跳轉等，而在HTML5中提供了2個新方法來管理history。

history.pushState(state, title, url);
history.replaceState(state, title, url);

參數說明

• state：一個與指定歷史記錄相關聯的狀態對象，當popstate事件觸發時，會把該對象傳入回調函數。如果不需要用到，可以傳null。
• title
  ：頁面的標題。但當前大多數瀏覽器都不支持或忽略這個值。可以傳null。
• url：添加或修改的history的網址。為了安全性，必須保持與當前URL同一個域。

簡而言之，兩個方法的區別只是pushState添加一個最新的歷史記錄，而replaceState則是把當前的頁面的歷史記錄替換掉。他們最大的特點是添加或替換歷史記錄後，瀏覽器地址欄會變成你傳的地址，而頁面並不會重新載入或跳轉。

例如，假設當前的頁面地址是example.com/1.html，且history中此時只有一條當前頁面的記錄。

• 當你執行 history.pushState(null, null, “2.html”)後，瀏覽器的地址欄會顯示example.com/2.html，但並不會跳轉到2.html，甚至並不會去檢查2.html存不存在，只是加入一個最新的歷史記錄項。此時history中會有兩個記錄。假如你此時點擊頁面上的link跳轉到另外一個頁面後，點擊瀏覽器的後退按鈕，則url會變成example.com/2.html，如果此前的1.html的頁面瀏覽器有緩存的話會顯示1.html的內容，否則會發起請求example.com/2.html。如果再次點後退，url會變成example.com/1.html。
• 而如果執行 history.replaceState(null, null, “2.html”)的話，瀏覽器的地址欄也會顯示example.com/2.html，區別是history中只有當前2.html的記錄，而1.html的記錄已被替換掉。

利用這些特性，可以用來修改當前頁面的URL來達成某些目的，比如可以用來記住搜索條件。

如果頁面是數據展示的頁面，頁面上有一些搜索或過濾的條件，當用戶點擊這些條件時，頁面通過AJAX把結果呈現到頁面上，當點擊某個結果頁面跳轉到下一個頁面後，用戶點擊瀏覽器的後退按鈕回到前一個頁面後，即使頁面有緩存，AJAX獲取的結果也不會保留在頁面上。如果後退後，需要記住此前的搜索條件和結果，可以在用戶點擊搜索條件時，把搜索條件利用history.replaceState

if (history.replaceState) {
    history.replaceState(condition, null, "?" + $.param(condition, true));
}

頁面可以設置成no-cache，當用戶後退時，瀏覽器會重新請求帶搜索條件的URL，後臺根據搜索條件，把對應的結果頁面呈現出來，從而達到記住搜索條件和結果的目的。

html5之history對象理解