JS history物件的使用

history 物件包含使用者在瀏覽器視窗中存取過的 URL，它是 window 物件的一個物件型別的屬性，可通過 window.history 屬性對其進行存取，使用時也可以省略 window。history 物件最初設計時用於表示視窗的瀏覽歷史。

但出於隱私方面的原因，history 物件不再允許指令碼存取已經存取過的 URL。現在可用的方法主要有 back()、forward()、go()、pushState() 和 replaceState()，其中，pushState() 和 replaceState() 是新增的方法，在主流瀏覽器上的一些較新版本（如 IE10+）上纔可以用。

1. history物件屬性

history 物件的屬性主要是 length，該屬性用於返回瀏覽器歷史列表中的 URL 數量。

2. history物件方法

history物件的常用方法見表 1。

表 1：history 物件的常用方法

方法	描述
back()	載入 history 列表中的前一個 URL
forward()	載入 history 列表中的下一個 URL
go(number)	載入 history 列表中的某個具體頁面。參數 number 是要存取的 URL 在 history 的 URL 列表中的相對位置，可取正數或負數。在當前頁面前面的 URL 的位置爲負數（如在前一個頁面的位置爲 -1 ）,反之則爲正數
pushState(state, title, url)	新增指定的 url 到歷史記錄中，並且重新整理將位址列中的網址更新爲 url
replaceState(state, title, url)	使用指定的 url 替換當前歷史記錄，並口無需重新整理瀏覽器就會將位址列中的網址更新爲 url

pushState() 和 replaceState() 兩個方法中的參數說明如下：

• state 參數：與第三個參數 url 相關的狀態物件。當同一個文件的瀏覽歷史出現變化觸發 popstate 事件時，該物件會傳入回撥函數。如果不需要這個物件，可將其設定爲 null；
• title 參數：新頁面的標題，目前這個參數在所有瀏覽器中並沒有效果，所以可將其設定爲 null。

3.存取history物件的屬性和方法的方式

存取history物件的屬性和方法的方式如下：

[window.]history.屬性
[window.]history.方法(參數1,參數2,…)

4. history物件的使用

history物件的使用範例：

history.back();//等效單擊後退按鈕
history.forward();//等效單擊前進按鈕
history.go(-1);//等效單擊一次後退按鈕,與history.back()功能等效
history.go(-2);//等效單擊兩次後退按鈕
history.pushState(null,null,"test1.html");
history.replaceState(null,null,"test2.html");

假設當前頁面的 URL 爲 test.html，則在當前頁面中存在上述範例中的最後兩條程式碼。

假設 test1.html、test2.html 和 test.html 儲存在同一目錄下，則瀏覽器執行 test.html 檔案時，當執行完 test.html 檔案中的 pushState() 方法後，位址列中的網址將會在沒有重新整理瀏覽器的情況下更改爲 test1.html，同時歷史記錄中將會存在 test.html 和 test1.html 兩條歷史記錄；而當執行完 replaceState() 方法後，位址列中的網址將會在沒有重新整理瀏覽器的情況下更改爲 test2.html。