history新增方法

history對象包含用戶訪問過的URL，屬於window對象的一部分，傳統的使用中，它擁有length屬性（瀏覽器歷史列表URL數目）

及back()、forward()、go()方法。

 

而新的H5則賦予了其更多的新特性:

 

往返緩存

默認狀況下,瀏覽器會緩存當前會話頁面，這樣當下一個頁面點擊後退按鈕，或前一個頁面點擊前進按鈕，瀏覽器便會從緩存中提取並加載此頁面，這個特性被稱爲「往返緩存」。

備註: 此緩存會保留頁面數據、DOM和js狀態，其實是將整個頁面無缺完好地保留

------------沉默分割線-----------------------------------------------------------------------------------------------------------------------

pushState(state, title, url) 

往歷史記錄棧中添加記錄

支持度: IE10+

state: 一個js對象，主要用於在popstate事件中做爲參數被獲取

title: 新頁面的標題，部分瀏覽器(好比firefox)忽略此參數，所以通常爲null

url: 新歷史記錄的地址，可爲頁面地址也可爲一個錨點值，新url必須與當前url處於同一個域，不然將拋出異常，此參數若沒有特別標註，會被設爲當前文檔url

實例:

假定當前網址是example.com/1.html，使用pushState方法在瀏覽記錄(history對象)中添加一個新記錄

var stateObj = { foo: 'bar' };
history.pushState(stateObj, 'page 2', '2.html');

瀏覽器地址欄將當即變成example.com/2.html，但並不會跳轉到2.html，甚至不會檢查2.html是否存在，也不會再popstate事件中獲取，由於:這個方法僅僅是添加了一條最新記錄，不會觸發頁面刷新

備註:

1.將url設爲錨點值時不會觸發hashchange

2.若是設置不一樣域名地址，會報錯，這樣作的目的是:防止用戶覺得它們是同一個網站，若沒有此限制，將很容易進行XSS、CSRF等攻擊方式

------------華麗分割線--------------------------------------------------------------------------------------------------------------------------

replaceState(state, title, url)

支持度: IE10+

參數與pushState一致，但其功能是改變當前的歷史記錄而不是添加新的記錄。

一樣不會觸發popstate

------------璀璨分割線--------------------------------------------------------------------------------------------------------------------------

history.state

支持度: IE10+

返回當前歷史記錄的state

--------------曼妙分割線---------------------------------------------------------------------------------------------------------------------

popstate事件

支持度: IE10+

語法: window.onpopstate= function(event){

　　console.log(event.state) //當前歷史記錄的state對象

}//注意大小寫

 

觸發條件: 點擊前進後退按鈕、調用back()、forward()、go()

我的思考: 對於pushState、replaceState沒法觸發它，能夠從語義上理解，pop有彈出、提取出的意味，是從歷史記錄棧中提取出來，而pushState、replaceState分別是壓入棧和改變元素，天然不會觸發。