從HTML5開始，我們可以開始操作這個(gè)歷史記錄堆棧。
創(chuàng)新互聯(lián)主要從事成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、外貿(mào)營銷網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)榆次,10多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108
DOM中的window對(duì)象通過window.history方法提供了對(duì)瀏覽器歷史記錄的讀取，讓你可以在用戶的訪問記錄中前進(jìn)和后退。
1.History
使用back(),forward(),和go()方法可以在用戶的歷史記錄中前進(jìn)和后退
后退：
window.history.back();
這個(gè)方法會(huì)像用戶點(diǎn)擊了瀏覽器工具欄上的返回鍵一樣。
同樣的，也可以用以下方法產(chǎn)生用戶前進(jìn)行為：
window.history.forward();
你可以使用go()方法從session歷史中載入特定的頁面。
向后移動(dòng)一頁：
window.history.go(-1);
向前移動(dòng)一頁：
window.history.go(1);
類似的，你可以前進(jìn)或者后退多頁。
還可以通過檢查瀏覽器歷史記錄的length屬性來找到歷史記錄堆棧中的頁面總數(shù)。
var numberOfEntries = window.history.length;
注意:IE支持向go()方法傳URL參數(shù)。
2.添加和修改history實(shí)體
自Gecko2開始引入 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)
HTML5引入了histtory.pushState()和history.replaceState()這兩個(gè)方法，他們?cè)试S添加和修改history實(shí)體。同時(shí)，這些方法會(huì)和window.onpostate事件一起工作。
使用history.pushState()方法來修改referrer,這種方法可以被用在經(jīng)過修改狀態(tài)后而為xmlhttpRequest對(duì)象創(chuàng)建的http header中。這個(gè)referrer會(huì)是創(chuàng)建XMLHttpRequest 時(shí)document的URL。
pushState 用于向 history 添加當(dāng)前頁面的記錄，而 replaceState 和 pushState 的用法完全一樣，唯一的區(qū)別就是它用于修改當(dāng)前頁面在 history 中的記錄。
假設(shè)http://mozilla.org/foo.html頁面執(zhí)行了一下JS
重慶分公司
重慶分公司
var stateObj = { foo: "bar" }; history.pushState(stateObj, "page 2", "bar.html");這種方法將會(huì)使url地址欄顯示http://mozilla.org/bar.html，但瀏覽器不會(huì)加載bar.html頁面，即使這個(gè)頁面存在也不會(huì)加載。
現(xiàn)在再次假設(shè)用戶繼續(xù)訪問http://google.com，然后點(diǎn)擊后退。這時(shí)，url地址欄將會(huì)，http://mozilla.org/bar.html，頁面會(huì)得到popstate事件（chrome），這個(gè)狀態(tài)對(duì)象會(huì)包含一個(gè)stateObj的copy。這個(gè)頁面看起來像foo.html。+
這時(shí)，我們?cè)俅吸c(diǎn)擊后退，URL將變成http://mozilla.org/foo.html，document將得到另一個(gè)popstate事件和為null的state對(duì)象。這次的返回動(dòng)作并沒有改變文檔的內(nèi)容。（也許會(huì)過一會(huì)嘗試加載…chrome）
pushState()有三個(gè)參數(shù):state對(duì)象，標(biāo)題(現(xiàn)在是被忽略，未作處理)，URL(可選)。具體細(xì)節(jié)：
· state對(duì)象 –state對(duì)象是一個(gè)JavaScript對(duì)象，它關(guān)系到由pushState()方法創(chuàng)建出來的新的history實(shí)體。用以存儲(chǔ)關(guān)于你所要插入到歷史 記錄的條目的相關(guān)信息。State對(duì)象可以是任何Json字符串。因?yàn)閒irefox會(huì)使用用戶的硬盤來存取state對(duì)象，這個(gè)對(duì)象的最大存儲(chǔ)空間為640k。如果大于這個(gè)數(shù) 值，則pushState()方法會(huì)拋出一個(gè)異常。如果確實(shí)需要更多的空間來存儲(chǔ)，請(qǐng)使用本地存儲(chǔ)。
· title—firefox現(xiàn)在回忽略這個(gè)參數(shù)，雖然它可能將來會(huì)被使用上。而現(xiàn)在最安全的使用方式是傳一個(gè)空字符串，以防止將來的修改?；蛘呖梢詡饕粋€(gè)簡短的標(biāo)題來表示state
· URL—這個(gè)參數(shù)用來傳遞新的history實(shí)體的URL，注意瀏覽器將不會(huì)在調(diào)用pushState()方法后加載這個(gè)URL。但也許會(huì)過一會(huì)嘗試加載這個(gè)URL。比如在用戶重啟了瀏覽器后，新的url可以不是絕對(duì)路徑。如果是相對(duì)路徑，那么它會(huì)相對(duì)于現(xiàn)有的url。新的url必須和現(xiàn)有的url同域，否則pushState()將拋出異常。這個(gè)參數(shù)是選填的，如果為空，則會(huì)被置為document當(dāng)前的url。
某種意義上來說，調(diào)用pushState()方法很像設(shè)置了window.location = “#foo”,這兩者都會(huì)創(chuàng)建和激活另一個(gè)關(guān)聯(lián)到當(dāng)前document的history實(shí)體，但pushState()另外有一些優(yōu)點(diǎn)：
l 新的url可以是任何和當(dāng)前url同域的url，相比之下，如果只設(shè)置hash，window.location會(huì)保持在同一個(gè)document。
l 如果不需要，你可以不修改url。對(duì)比而言，設(shè)置window.location = “#foo”;僅產(chǎn)生新的history實(shí)體，如果你當(dāng)前的hash不是#foo
l 你可以將任意的數(shù)據(jù)與你的新history實(shí)體關(guān)聯(lián)。使用基于hash的方法，需要將所有相關(guān)的數(shù)據(jù)編碼為一個(gè)短字符串。
注意，pushState()方法不會(huì)使hashchange時(shí)間發(fā)生，即使是新舊url只是hash不同。
history.replaceState() 用起來很像pushState()，除了replaceState()是用來修改當(dāng)前的history實(shí)體而不是創(chuàng)建一個(gè)新的。這個(gè)方法有時(shí)會(huì)很有用，當(dāng) 你需要對(duì)某些用戶行為作反應(yīng)而更新一個(gè)state對(duì)象或者當(dāng)前history實(shí)體時(shí)，可以使用它來更新state對(duì)象或者當(dāng)前history實(shí)體的url。
當(dāng)history實(shí)體被改變時(shí)，popstate事件將會(huì)發(fā)生。如果history實(shí)體是有pushState和replaceState方法產(chǎn)生的，popstate事件的state屬性會(huì)包含一份來自history實(shí)體的state對(duì)象的拷貝
詳見window.onpopstate
讀取現(xiàn)有state
當(dāng)頁面加載時(shí)，它可能會(huì)有一個(gè)非空的state對(duì)象。這可能發(fā)生在當(dāng)頁面設(shè)置一個(gè)state對(duì)象(使用pushState或者replaceState)之后用戶重啟了瀏覽器。當(dāng)頁面重新加載，頁面將收到onload事件，但不會(huì)有popstate事件。然而，如果你讀取history.state屬性，將在popstate事件發(fā)生后得到這個(gè)state對(duì)象
