瀏覽器中url存儲(chǔ)的JavaScript實(shí)現(xiàn)
現(xiàn)在的瀏覽器里,有一個(gè)十分有趣的功能,你可以在不刷新頁(yè)面的情況下修改瀏覽器URL;在瀏覽過(guò)程中.你可以將瀏覽歷史儲(chǔ)存起來(lái),當(dāng)你在瀏覽器點(diǎn)擊后退按鈕的時(shí)候,你可以沖瀏覽歷史上獲得回退的信息,這聽(tīng)起來(lái)并不復(fù)雜,是可以實(shí)現(xiàn)的,我們來(lái)編寫些代碼。來(lái)看看它是如何工作的。
var stateObject = {}; var title = "Wow Title"; var newUrl = "/my/awesome/url"; history.pushState(stateObject,title,newUrl);
History 對(duì)象 pushState() 這個(gè)方法有3個(gè)參數(shù),你可以從上面的例子看到。第一個(gè)參數(shù),是一個(gè)Json對(duì)象 , 在你儲(chǔ)存有關(guān)當(dāng)前URl的任意歷史信息.第二個(gè)參數(shù),title 就相當(dāng)于傳遞一個(gè)文檔的標(biāo)題 ,第三個(gè)參數(shù)是用來(lái)傳遞新的URL. 你將看到瀏覽器的地址欄發(fā)生變化而當(dāng)前頁(yè)面并沒(méi)刷新。
讓我們看一個(gè)例子,在這個(gè)例子中我們將在每個(gè)獨(dú)立的URL中存儲(chǔ)一些任意數(shù)據(jù)。
for(i=0;i<5;i++){ var stateObject = {id: i}; var title = "Wow Title "+i; var newUrl = "/my/awesome/url/"+i; history.pushState(stateObject,title,newUrl); }
現(xiàn)在運(yùn)行,點(diǎn)擊瀏覽器的返回按鈕,查看URL是怎么改變的。對(duì)于每次URL的改變,是因?yàn)樗鎯?chǔ)了歷史狀態(tài)“id”以及對(duì)應(yīng)的值。但是我們?cè)趺粗匦芦@得歷史狀態(tài),并且在此基礎(chǔ)上做些事情呢?我們需要對(duì)“popstate”添加事件監(jiān)聽(tīng)器,這將會(huì)在每次歷史對(duì)象的狀態(tài)改變的時(shí)候觸發(fā)。
for(i=0;i<5;i++){ var stateObject = {id: i}; var title = "Wow Title "+i; var newUrl = "/my/awesome/url/"+i; history.pushState(stateObject,title,newUrl); alert(i); } window.addEventListener('popstate', function(event) { readState(event.state); }); function readState(data){ alert(data.id); }
現(xiàn)在你會(huì)看到無(wú)論什么時(shí)候你點(diǎn)擊返回按鈕,一個(gè)“popstate”事件就會(huì)被觸發(fā)。我們的事件偵聽(tīng)器然后檢索歷史狀態(tài)對(duì)象與之關(guān)聯(lián)的URL,并提示“id”的值。
它是非常的簡(jiǎn)單和有趣,不是嗎?
相關(guān)文章
深入理解JavaScript高級(jí)之詞法作用域和作用域鏈
這篇文章主要介紹了JavaScript高級(jí)之詞法作用域和作用域鏈,有需要的朋友可以參考一下2013-12-12JavaScript bold方法入門實(shí)例(把指定文字顯示為粗體)
這篇文章主要介紹了JavaScript字符串對(duì)象的bold方法入門實(shí)例,bold方法用于把指定文字顯示為粗體,需要的朋友可以參考下2014-10-10JavaScript fontsize方法入門實(shí)例(按照指定的尺寸來(lái)顯示字符串)
這篇文章主要介紹了JavaScript fontsize方法入門實(shí)例,fontsize方法用于按照指定的尺寸來(lái)顯示字符串,需要的朋友可以參考下2014-10-10javascript學(xué)習(xí)筆記(一)基礎(chǔ)知識(shí)
本文是學(xué)習(xí)筆記系列的第一篇,跟以前一樣,介紹些基礎(chǔ)知識(shí),包括js基本概念、 JScript 的變量、js的數(shù)據(jù)類型、3.JScript 的運(yùn)算符、js流程控制、js函數(shù)。有需要的朋友可以參考下2014-09-09在JavaScript的正則表達(dá)式中使用exec()方法
這篇文章主要介紹了在JavaScript的正則表達(dá)式中使用exec()方法,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06