操縱瀏覽器歷史記錄--popstate() && history.pushState()

1、歷史記錄前進與後退

1.後退：

window.history.back()--至關於用戶在瀏覽器的工具欄上點擊返回按鈕；

2.前進：

window.history.forward()--至關於用戶在瀏覽器的工具欄上點擊前進按鈕；

3.移動到指定歷史記錄點：

經過go()方法，指定一個相對於當前頁面位置的數值，從當前會話的歷史記錄中加載頁面（當前位置頁面索引：0，上一頁：-1，下一頁：1）；

window.history.go(-2)--後退2頁，至關於調用兩次back();

window.history.go(1)--前進1頁，至關於調用forward();

*能夠經過window.history.length，獲得歷史記錄棧中一共有多少頁。

2、添加/修改歷史記錄條目

1.pushState(stateObject,title,URL):

逐條添加歷史記錄條目，

a.狀態對象（stateObject）--一個JavaScript對象，與用pushState()方法建立的新歷史記錄條目關聯。不管什麼時候用戶導航到新建立的狀態，popstate事件都會被觸發，而且事件對象的state屬性都包含歷史記錄條目的狀態對象的拷貝；（ps:FireFox瀏覽器強行限制狀態對象的大小爲640k，超出則拋異常，可經過sessionStorage或localStorage存儲大的數據）

b.標題（title）--傳入一個簡短的標題，標明將要進入的狀態；（FireFox瀏覽器目前會忽略該參數，可是傳一個空字符串會比較安全）

c.地址（URL）--新的歷史記錄條目的地址（可選，不指定的話則爲文檔當前URL）；瀏覽器不會在調用pushState()方法後加載該地址；傳入的URL與當前URL應該是同源的，不然，pushState()會拋出異常。

*某種意義上，調用pushState()有點相似於設置window.location='#foo'，它們都會在當前文檔內建立和激活新的歷史記錄條目。

（拓展：window.location--待研究）

2.replaceState():

history.replaceState()操做相似於history.pushState()，不一樣之處在於replaceState()方法會修改當前歷史記錄條目而並不是建立新的條目。

3.popstate():

每當激活的歷史記錄發生變化時，都會觸發popstate事件。若是被激活的歷史記錄條目是由pushState所建立，或是被replaceState方法影響到的，popstate事件的狀態屬性將包含歷史記錄的狀態對象的一個拷貝。

讀取當前狀態：

若是頁面中使用pushState()或replaceState()方法設置了一個狀態對象，而後用戶重啓了瀏覽器。當頁面從新加載時，頁面會觸發onload事件，但不會觸發popstate事件。可使用history.state直接讀取當前歷史記錄條目的狀態，而不須要等待popstate事件。

調用history.pushState()或者history.replaceState()不會觸發popstate事件.pushState事件只會在其餘瀏覽器操做時觸發, 好比點擊後退按鈕(或者在JavaScript中調用history.back()方法)。

調用方法:

window.onpopstate = function(event) {
   //作一些操做
   event.state; //  當前歷史記錄條目的狀態 
};

　　　　或者：

window.addEventListener('popstate', function(event) {
  //作一些操做
});

（拓展：EventTarget.addEventListener() 方法將指定的事件監聽器註冊到EventTarget上，當該對象觸發指定的事件時，指定的回調函數就會被執行。--EventTarget待研究）

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　--資料來源MDN