操縱瀏覽器的歷史記錄

瀏覽器的 window 對象提供的 history 對象給予了咱們訪問和操縱歷史記錄（僅針對當前文檔）的能力。

---

history api

window.history.back(); 瀏覽器返回一頁。
window.history.forward(); 瀏覽器前進一頁。
window.history.go(i); 瀏覽器前進（後退）i 頁，若是 i 爲 0 ，則刷新當前頁面。
window.history.length; 瀏覽器歷史記錄棧中一共有多少頁。
window.history.state; 當前的狀態對象

---

window.history.replaceState(obj, title, url)
window.history.pushState(obj, title, url);
兩個方法均可以達到替換當前瀏覽器地址而不刷新頁面的做用：讓瀏覽器的地址欄顯示爲咱們傳入的地址，但不會加載該頁面也不會檢查該頁面是否存在。
區別在於前者會修改當前歷史記錄條目，然後者是建立新歷史記錄條目。

方法接受三個參數

1. 狀態對象（state object），任何可序列化的對象均可以被當作狀態對象，大小限制爲 640K。

2. 標題（title） ，暫時大多數瀏覽器都會忽略此參數，傳入空字符串便可

3. 地址（URL），傳入的 url 應與原地址同源，不然會報錯

---

popstate事件

每當同一個文檔的瀏覽歷史（即 history 對象）出現變化時，就會觸發 popstate 事件。可是pushState 和 replaceState 兩個方法不會觸發該事件
事件的回調函數的 event 參數的state 屬性指向 pushState 和 replaceState 方法爲當前 url 所提供的狀態對象（即這兩個方法的第一個參數）。

window.addEventListener('popstate', function(event) {  
  console.log("location: " + document.location);
  console.log("state: " + JSON.stringify(event.state));  
  // 或者經過 var currentState = history.state; 來獲取狀態對象
});