[TOC]
* * * * *
*
### 一. 以前的 window.history
~~~
history對象提供了一系列方法，允許在瀏覽歷史之間移動。
back()：移動到上一個訪問頁面，等同于瀏覽器的后退鍵；
forward()：移動到下一個訪問頁面，等同于瀏覽器的前進鍵；
go()：接受一個整數作為參數，移動到該整數指定的頁面，
比如go(1)相當于forward()，go(-1)相當于back()；
go(0) 會刷新頁面。
~~~
### 二. H5中新增的方法
> H5為 `history` 對象添加了兩個新方法，`history.pushState()` 和 `history.replaceState()` ，用來在瀏覽歷史中添加和修改記錄。
為了程序的健壯，我們需要判斷瀏覽器是否真有這么個特性
~~~
if (!!(window.history && history.pushState)){
// 支持History API
}
else {
// 不支持
}
~~~
>[info] 語法：
~~~
history.pushState() 方法接受三個參數：
state：一個與指定網址相關的狀態對象，popstate事件觸發時，該對象會傳入回調函數。如果不需要這個對象，此處可以填null;
title：新頁面的標題，但是所有瀏覽器目前都忽略這個值，因此這里可以填null;
url：新的網址，必須與當前頁面處在同一個域（跨域則報錯）。瀏覽器的地址欄將顯示這個網址。
~~~
>[info] 測試：用node起靜態服務，提供HTML頁面
:-: 
執行下面三種之一效果是一樣的，并且每次都是添加了新紀錄在 history 中，可見頁面內容不變，即沒有向服務器在去請求新頁面，而只是改變了地址欄。
:-: 
:-: 
訪問 `history.length` 可以得到歷史記錄的個數。
我們注冊監聽事件
~~~
window.addEventListener('popstate', function(event) {
console.log(event);
});
或者：
window.onpopstate = function (event) {
console.log(event);
};
~~~
>[danger] 這個事件的觸發機制是：當我們在點擊瀏覽器的返回和倒退，或者用js執行 返回，倒退功能時候觸發。
還有個參數相同的功能，替換當前的歷史 `history.replaceState`
