[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`