侵權舉報/版權申訴DOM中的widow對象通過widow.hioy方法提供了對瀏覽器歷史記錄的讀取，讓你可以在用戶的訪問記錄中前進和后退。從HTML5開始，我們可以開始操作這個歷史記錄堆棧。1.Hioy使用back(),fowad(),和go()方法......
以下是【金聰采編】分享的內(nèi)容全文：
以下是【金聰采編】分享的內(nèi)容全文：
從HTML5開始，我們可以開始操作這個歷史記錄堆棧。
1.History
使用back(),forward(),和go()方法可以在用戶的歷史記錄中前進和后退
前進和后退
后退：
復制代碼
代碼如下:window.history.back();
這個方法會像用戶點擊了瀏覽器工具欄上的返回鍵一樣。
同樣的，也可以用以下方法產(chǎn)生用戶前進行為：
復制代碼
代碼如下:window.history.forward();
移動到歷史記錄中特定的位置
你可以使用go()方法從session歷史中載入特定的頁面。
向后移動一頁：
復制代碼
代碼如下:window.history.go(-1);
向前移動一頁：
復制代碼
代碼如下:window.history.go(1);
類似的，你可以前進或者后退多頁。
還可以通過檢查瀏覽器歷史記錄的length屬性來找到歷史記錄堆棧中的頁面總數(shù)。
復制代碼
代碼如下:var numberOfEntries = window.history.length;
注意:IE支持向go()方法傳URL參數(shù)。
2.添加和修改history實體
自Gecko2開始引入 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)
HTML5引入了histtory.pushState()和history.replaceState()這兩個方法，他們允許添加和修改history實體。同時，這些方法會和window.onpostate事件一起工作。
使用history.pushState()方法來修改referrer,這種方法可以被用在經(jīng)過修改狀態(tài)后而為xmlhttpRequest對象創(chuàng)建的http header中。這個referrer會是創(chuàng)建XMLHttpRequest 時document的URL。
pushState 用于向 history 添加當前頁面的記錄，而 replaceState 和 pushState 的用法完全一樣，唯一的區(qū)別就是它用于修改當前頁面在 history 中的記錄。
例子
假設http://mozilla.org/foo.html頁面執(zhí)行了一下JS
復制代碼
代碼如下:var stateObj = { foo: "bar" }; history.pushState(stateObj, "page 2", "bar.html");
這種方法將會使url地址欄顯示http://mozilla.org/bar.html，但瀏覽器不會加載bar.html頁面，即使這個頁面存在也不會加載。
現(xiàn)在再次假設用戶繼續(xù)訪問http://google.com，然后點擊后退。這時，url地址欄將會，http://mozilla.org/bar.html，頁面會得到popstate事件（chrome），這個狀態(tài)對象會包含一個stateObj的copy。這個頁面看起來像foo.html。+
這時，我們再次點擊后退，URL將變成http://mozilla.org/foo.html，document將得到另一個popstate事件和為null的state對象。這次的返回動作并沒有改變文檔的內(nèi)容。（也許會過一會嘗試加載…chrome）
pushState方法
pushState()有三個參數(shù):state對象，標題(現(xiàn)在是被忽略，未作處理)，URL(可選)。具體細節(jié)：
· state對象 –state對象是一個JavaScript對象，它關系到由pushState()方法創(chuàng)建出來的新的history實體。用以存儲關于你所要插入到歷史 記錄的條目的相關信息。State對象可以是任何Json字符串。因為firefox會使用用戶的硬盤來存取state對象，這個對象的最大存儲空間為640k。如果大于這個數(shù) 值，則pushState()方法會拋出一個異常。如果確實需要更多的空間來存儲，請使用本地存儲。
· title—firefox現(xiàn)在回忽略這個參數(shù)，雖然它可能將來會被使用上。而現(xiàn)在最安全的使用方式是傳一個空字符串，以防止將來的修改?；蛘呖梢詡饕粋€簡短的標題來表示state
· URL—這個參數(shù)用來傳遞新的history實體的URL，注意瀏覽器將不會在調(diào)用pushState()方法后加載這個URL。但也許會過一會嘗試加載這個URL。比如在用戶重啟了瀏覽器后，新的url可以不是絕對路徑。如果是相對路徑，那么它會相對于現(xiàn)有的url。新的url必須和現(xiàn)有的url同域，否則pushState()將拋出異常。這個參數(shù)是選填的，如果為空，則會被置為document當前的url。
某種意義上來說，調(diào)用pushState()方法很像設置了window.location = “#foo”,這兩者都會創(chuàng)建和激活另一個關聯(lián)到當前document的history實體，但pushState()另外有一些優(yōu)點：
新的url可以是任何和當前url同域的url，相比之下，如果只設置hash，window.location會保持在同一個document。
如果不需要，你可以不修改url。對比而言，設置window.location = “#foo”;僅產(chǎn)生新的history實體，如果你當前的hash不是#foo
你可以將任意的數(shù)據(jù)與你的新history實體關聯(lián)。使用基于hash的方法，需要將所有相關的數(shù)據(jù)編碼為一個短字符串。
注意，pushState()方法不會使hashchange時間發(fā)生，即使是新舊url只是hash不同。
replaceState()方法
history.replaceState() 用起來很像pushState()，除了replaceState()是用來修改當前的history實體而不是創(chuàng)建一個新的。這個方法有時會很有用，當 你需要對某些用戶行為作反應而更新一個state對象或者當前history實體時，可以使用它來更新state對象或者當前history實體的url。
popstate事件
當history實體被改變時，popstate事件將會發(fā)生。如果history實體是有pushState和replaceState方法產(chǎn)生的，popstate事件的state屬性會包含一份來自history實體的state對象的拷貝
詳見window.onpopstate
讀取當前的state
讀取現(xiàn)有state
當頁面加載時，它可能會有一個非空的state對象。這可能發(fā)生在當頁面設置一個state對象(使用pushState或者replaceState)之后用戶重啟了瀏覽器。當頁面重新加載，頁面將收到onload事件，但不會有popstate事件。然而，如果你讀取history.state屬性，將在popstate事件發(fā)生后得到這個state對象
var currentState = history.state;
Browsers: Tested and Working In
HTML5 Browsers
Chrome 8,9,10
Firefox 4
Safari 5
Opera 11
Safari iOS 4.3
HTML4 Browsers
IE6,7,8,9
Firefox 3
Opera 10
Safari 4
Safari iOS prior to version 4.3
pushState與replaceState區(qū)別
history.pushState(state, title, url)
--------------------------------------------------------------------------------
將當前URL和history.state加入到history中，并用新的state和URL替換當前。不會造成頁面刷新。
state：與要跳轉到的URL對應的狀態(tài)信息。
title：可以不傳
url：要跳轉到的URL地址，不能跨域。
history.replaceState(state, title, url)
--------------------------------------------------------------------------------
用新的state和URL替換當前。不會造成頁面刷新。
state：與要跳轉到的URL對應的狀態(tài)信息。
title：可以不傳
url：要跳轉到的URL地址，不能跨域。
--------------------------------------------------------------------------------
兩者看似沒有區(qū)別，其實區(qū)別很大的，pushState是添加歷史記錄的，而replaceState是不添加的。
