html5之history對象理解

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添加到頁面的query string中。

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

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