詳解window.history

Window.history儲存使用者在一個會話期間的網站通路記錄，使用者每次通路一個新的URL即建立一個新的曆史記錄。

history.go()、history.back()、history.forward()

history.back()和history.forward()分别表示向後一頁和向前一頁。

history.go(num)表示向前或向後翻多少頁，num為正數表示向前翻，為負數則向後翻。

History.back()等價于history.go(-1)，history.forward()等價于history.go(1)。

執行這三個中的任一方法，觸發浏覽器的popstate事件，如果隻是hash部分發生變化，還可能同時觸發hashchange事件。

修改網站路徑并建立新的曆史記錄

history.pushState(statedata, title, url);
           

參數URL必須和目前URL同源，否則會報錯。隻可以修改URL中路徑、井号之後的片段（即hash）或者URL中問号（？）之後的查詢區段。

每執行一次pushState()用新的URL替換掉目前URL，即位址欄URL會變，window.location.href也會變，同時建立一個新的曆史記錄。但執行pushState()永遠不觸發hashchange事件。

參數statedata可以是任何被序列化的資料，這些資料被儲存在使用者硬碟上。但狀态資料有大小限制，比如Firefox隻允許640KB字元。

使用pushState()的好處：隻改URL的hash部分，window.location使用的是同一個document。

相容性問題

pushState直到IE10才被支援，在早版本的IE中隻能通過修改window.location=”#foo”完成，但這樣會觸發hashchange事件。

修改網站路徑但不建立新的曆史記錄

看标題就知道了，replaceState()和pushState()的唯一差別是不建立新的曆史記錄，而是直接修改目前曆史記錄。

history.replaceState(stateData, title, url);
           

曆史記錄狀态

有兩種方式可以通路曆史通路記錄的狀态資訊，history.state傳回曆史通路堆棧最頂端的記錄的狀态；而PopStateEvent.state值有在PopStateEvent事件觸發的時候在事件監聽中才能通路。

State的預設值在不同浏覽器可能不同，比如IE10以下預設是undefiend，但IE10和IE11預設是null。HTML5推薦使用nul為預設值。

事件

popstate事件

調用history.back()、history.forward()、history.go()等方法，會觸發popstate事件，單純調用pushState()或replaceState()不觸發popstate事件。

通路事件的state屬性可擷取當初pushState()或replaceState()設定的狀态資料。