History對象

基本概念

history接口容許操做瀏覽器的曾經在標籤頁或者框架裏訪問的會話歷史記錄。

屬性

• history.length
• history.state
• history.scrollRestoration

方法

• history.back()
• history.forward()
• history.go()
• history.pushState()
• history.replaceState()

history更多屬性和方法，請參考MDN連接

history.pushState();

按指定的名稱和URL將數據push進會話歷史棧橋。
history.pushState()方法接收三個參數，依次爲:

1. state: 一個與指定網址相關的狀態對象，poststate事件觸發時，該對象會傳入回調函數。若是不須要這個對象，此處能夠填null.
2. title: 新頁面的標題，可是全部瀏覽器目前都會忽略這個值，所以這裏能夠填null.
3. url: 新的網址，必須與當前頁面處在同一個域。瀏覽器的地址欄將顯示這個網址。

注意事項

參數中url必須和當前頁面處在同一個域下，不然會報錯。
例如，我在當前index.html中使用該方法，url參數爲"https://www.baidu.com".會出現下面的報錯信息。

調用了pushState之後，瀏覽器地址欄會跟隨者發生變化，可是頁面並不會刷新，只是在路由棧裏面增長了一條記錄。
隨後點擊瀏覽器前進後退箭頭，地址欄會有變化，頁面不會刷新。可是若是在當前瀏覽器地址欄從新輸入一個地址，而後又返回就會刷新一次地址。舉例以下：

當前頁面是page1.html,調用pushState(null, null, 'page2.html')方法之後,頁面地址變爲page2.html.然而頁面顯示的內容依舊是page1.html的內容。此時刪掉瀏覽器地址欄參數，改成'https://www.baidu.com'並回車訪問，去到百度頁面的時候，而後再點擊瀏覽器返回箭頭，將顯示page2.html頁面內容。
固然，上面在地址欄從新輸入一個地址的操做，能夠改成任何能夠刷新當前頁面的操做。好比，window.location.href或者window.location.reload()等等

history.replaceState()

history.replaceState方法的參數和pushState()方法如出一轍，區別是它修改瀏覽歷史中當前記錄。

history.state

當前頁面的state對象，即pushState()方法中第一個參數的值。

popstate事件

每當同一個文檔的瀏覽歷史出現變化時，就會觸發popstate事件。
須要注意的是，僅僅調用pushState方法或replaceState方法，並不會觸發該事件，只有用戶點擊瀏覽器倒退按鈕或前進按鈕，或者使用JavaScript調用back,forward,go方法時纔會觸發。

使用的時候能夠爲popstate事件指定回調函數。

window.addEventListener('popstate', function(event) {
  console.log('location: ' + document.location);
  console.log('state: ' + JSON.stringify(event.state));
});

應用

咱們知道，Ajax能夠實現頁面無刷新操做。可是，也會形成另外的問題，即沒法前進與後退。當執行Ajax操做的時候，往瀏覽器history中塞入一個地址（使用pushState）;因而，返回的時候，經過URL或其餘傳參，咱們就能夠還原到Ajax以前的模樣。