1.概述

window.history屬性指向 History 對(duì)象票灰，它表示當(dāng)前窗口的瀏覽歷史碗短。
History 對(duì)象保存了當(dāng)前窗口訪問(wèn)過(guò)的所有頁(yè)面網(wǎng)址。
由于安全原因，瀏覽器不允許腳本讀取這些地址蚯舱，但是允許在地址之間導(dǎo)航。

// 后退到前一個(gè)網(wǎng)址
history.back()
// 等同于
history.go(-1)

瀏覽器工具欄的“前進(jìn)”和“后退”按鈕芹敌，其實(shí)就是對(duì) History 對(duì)象進(jìn)行操作蠢沿。

2.屬性

History 對(duì)象主要有兩個(gè)屬性。
History.length：當(dāng)前窗口訪問(wèn)過(guò)的網(wǎng)址數(shù)量（包括當(dāng)前網(wǎng)頁(yè)）
History.state：History 堆棧最上層的狀態(tài)值（詳見(jiàn)下文）

// 當(dāng)前窗口訪問(wèn)過(guò)多少個(gè)網(wǎng)頁(yè)
window.history.length // 1
// History 對(duì)象的當(dāng)前狀態(tài)
// 通常是 undefined塘雳，即未設(shè)置
window.history.state // undefined

3.方法

3.1 History.back()陆盘、History.forward()、History.go()

History.back()：
移動(dòng)到上一個(gè)網(wǎng)址败明，等同于點(diǎn)擊瀏覽器的后退鍵隘马。對(duì)于第一個(gè)訪問(wèn)的網(wǎng)址，該方法無(wú)效果妻顶。
History.forward()：
移動(dòng)到下一個(gè)網(wǎng)址酸员，等同于點(diǎn)擊瀏覽器的前進(jìn)鍵。對(duì)于最后一個(gè)訪問(wèn)的網(wǎng)址盈包，該方法無(wú)效果沸呐。
History.go()：
接受一個(gè)整數(shù)作為參數(shù)，以當(dāng)前網(wǎng)址為基準(zhǔn)呢燥，移動(dòng)到參數(shù)指定的網(wǎng)址崭添，比如go(1)相當(dāng)于forward()，go(-1)相當(dāng)于back()叛氨。如果參數(shù)超過(guò)實(shí)際存在的網(wǎng)址范圍呼渣，該方法無(wú)效果；如果不指定參數(shù)寞埠，默認(rèn)參數(shù)為0屁置，相當(dāng)于刷新當(dāng)前頁(yè)面。

history.back();
history.forward();
history.go(-2);
history.go(0); // 刷新當(dāng)前頁(yè)面

注意仁连，移動(dòng)到以前訪問(wèn)過(guò)的頁(yè)面時(shí)蓝角，頁(yè)面通常是從瀏覽器緩存之中加載阱穗，而不是重新要求服務(wù)器發(fā)送新的網(wǎng)頁(yè)。

3.2 History.pushState()

History.pushState()方法用于在歷史中添加一條記錄

window.history.pushState(state, title, url)

該方法接受三個(gè)參數(shù)使鹅，依次為：
state：一個(gè)與添加的記錄相關(guān)聯(lián)的狀態(tài)對(duì)象揪阶，主要用于popstate事件。該事件觸發(fā)時(shí)患朱，該對(duì)象會(huì)傳入回調(diào)函數(shù)鲁僚。也就是說(shuō)，瀏覽器會(huì)將這個(gè)對(duì)象序列化以后保留在本地裁厅，重新載入這個(gè)頁(yè)面的時(shí)候冰沙，可以拿到這個(gè)對(duì)象。如果不需要這個(gè)對(duì)象执虹，此處可以填null拓挥。
title：新頁(yè)面的標(biāo)題。但是声畏，現(xiàn)在所有瀏覽器都忽視這個(gè)參數(shù)撞叽，所以這里可以填空字符串。
url：新的網(wǎng)址插龄，必須與當(dāng)前頁(yè)面處在同一個(gè)域愿棋。瀏覽器的地址欄將顯示這個(gè)網(wǎng)址。
假定當(dāng)前網(wǎng)址是example.com/pageA.html均牢，使用pushState()方法在瀏覽記錄（History 對(duì)象）中添加一個(gè)新記錄pageB.html糠雨。

var stateObj = { param: 'aaa' };
history.pushState(stateObj, 'page B', 'pageB.html');

添加新記錄后，瀏覽器地址欄立刻顯示example.com/pageB.html徘跪，但并不會(huì)跳轉(zhuǎn)到pageB.html甘邀，甚至也不會(huì)檢查pageB.html是否存在，它只是成為瀏覽歷史中的最新記錄垮庐。這時(shí)松邪，在地址欄輸入一個(gè)新的地址(比如訪問(wèn)www.baidu.com)，然后點(diǎn)擊了倒退按鈕哨查，頁(yè)面的 URL 將顯示pageB.html逗抑；你再點(diǎn)擊一次倒退按鈕，URL 將顯示pageA.html寒亥。
總之邮府，pushState()方法不會(huì)觸發(fā)頁(yè)面刷新，只是導(dǎo)致 History 對(duì)象發(fā)生變化溉奕，地址欄會(huì)有反應(yīng)褂傀。
使用該方法之后，就可以用History.state屬性讀出狀態(tài)對(duì)象加勤。

history.state // { param: 'aaa' }

3.3 History.replaceState()

History.replaceState()方法用來(lái)修改 History 對(duì)象的當(dāng)前記錄仙辟，其他都與pushState()方法一模一樣同波。
假定當(dāng)前網(wǎng)頁(yè)是example.com/example.html

history.pushState({page: 1}, 'title 1', '?page=1')
// URL 顯示為 http://example.com/example.html?page=1
history.pushState({page: 2}, 'title 2', '?page=2');
// URL 顯示為 http://example.com/example.html?page=2
history.replaceState({page: 3}, 'title 3', '?page=3');
// URL 顯示為 http://example.com/example.html?page=3
history.back()
// URL 顯示為 http://example.com/example.html?page=1
history.back()
// URL 顯示為 http://example.com/example.html
history.go(2)
// URL 顯示為 http://example.com/example.html?page=3

4.popstate 事件

每當(dāng)同一個(gè)文檔的瀏覽歷史（即history對(duì)象）出現(xiàn)變化時(shí)，就會(huì)觸發(fā)popstate事件欺嗤。
注意参萄，調(diào)用pushState()方法或replaceState()方法 卫枝，并不會(huì)觸發(fā)該事件煎饼。
點(diǎn)擊瀏覽器倒退按鈕和前進(jìn)按鈕，或者使用 JavaScript 調(diào)用History.back()校赤、History.forward()吆玖、History.go()方法時(shí)才會(huì)觸發(fā)。另外马篮，該事件只針對(duì)同一個(gè)文檔沾乘，如果瀏覽歷史的切換，導(dǎo)致加載不同的文檔浑测，該事件也不會(huì)觸發(fā)翅阵。
使用的時(shí)候，可以為popstate事件指定回調(diào)函數(shù)迁央。

window.onpopstate = function (event) {
  console.log('location: ' + document.location);
  console.log('state: ' + JSON.stringify(event.state));
};

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

回調(diào)函數(shù)的參數(shù)是一個(gè)event事件對(duì)象掷匠，它的state屬性指向pushState和replaceState方法為當(dāng)前 URL 所提供的狀態(tài)對(duì)象（即這兩個(gè)方法的第一個(gè)參數(shù)）。上面代碼中的event.state岖圈，就是通過(guò)pushState和replaceState方法讹语，為當(dāng)前 URL 綁定的state對(duì)象。