HTMl5的存儲方式sessionStorage和localStorage詳解

html5中的Web Storage包括了兩種存儲方式:sessionStorage和localStorage孔飒。sessionStorage用于本地存儲一個會話(session)中的數(shù)據(jù)酱塔,這些數(shù)據(jù)只有在同一個會話中的頁面才能訪問并且當會話結(jié)束后數(shù)據(jù)也隨之銷毀火诸,因此sessionStorage不是一種持久化的本地存儲,僅僅是會話級別的存儲弟蚀。而localStorage用于持久化的本地存儲,除非主動刪除數(shù)據(jù)酗失,否則數(shù)據(jù)是永遠不會過期的义钉。


一、web storage和cookie的區(qū)別

Web Storage的概念和cookie相似规肴,區(qū)別是它是為了更大容量存儲設(shè)計的捶闸。Cookie的大小是受限的,并且每次你請求一個新的頁面的時候Cookie都會被發(fā)送過去拖刃,這樣無形中浪費了帶寬删壮,另外cookie還需要指定作用域,不可以跨域調(diào)用兑牡。

除此之外央碟,Web Storage擁有setItem,getItem,removeItem,clear等方法,不像cookie需要前端開發(fā)者自己封裝setCookie均函,getCookie亿虽。

但是Cookie也是不可以或缺的:Cookie的作用是與服務(wù)器進行交互,作為HTTP規(guī)范的一部分而存在 苞也,而Web Storage僅僅是為了在本地“存儲”數(shù)據(jù)而生


二洛勉、html5 web storage的瀏覽器支持情況

瀏覽器的支持除了IE7及以下不支持外,其他標準瀏覽器都完全支持(ie及FF需在web服務(wù)器里運行)如迟,值得一提的是IE總是辦好事收毫,例如IE7、IE6中的UserData其實就是javascript本地存儲的解決方案。通過簡單的代碼封裝可以統(tǒng)一到所有的瀏覽器都支持web storage牛哺。

要判斷瀏覽器是否支持localStorage可以使用下面的代碼:

if(window.localStorage){

alert("瀏覽支持localStorage")

}

else

{

alert("瀏覽暫不支持localStorage")

}

//或者 if(typeof window.localStorage == 'undefined'){ alert("瀏覽暫不支持localStorage") }


三、localStorage和sessionStorage操作

localStorage和sessionStorage都具有相同的操作方法劳吠,例如setItem引润、getItem和removeItem等

用法:setItem、getItem和removeItem

1.setlem

setItem存儲value

用途:將value存儲到key字段

用法:.setItem( key, value)

代碼示例:

sessionStorage.setItem("key", "value");

localStorage.setItem("site", "js8.in");


2.getItem

getItem獲取value

用途:獲取指定key本地存儲的值

用法:.getItem(key)

代碼示例:

var value = sessionStorage.getItem("key");

var site = localStorage.getItem("site");


3.removeItem

removeItem刪除key

用途:刪除指定key本地存儲的值

用法:.removeItem(key)

代碼示例:

sessionStorage.removeItem("key");

localStorage.removeItem("site");


4.clear

clear清除所有的key/value

用途:清除所有的key/value

用法:.clear()

代碼示例:

sessionStorage.clear();

localStorage.clear();


四痒玩、其他操作方法:點操作和[]

web Storage不但可以用自身的setItem,getItem等方便存取淳附,也可以像普通對象一樣用點(.)操作符,及[]的方式進行數(shù)據(jù)存儲蠢古,像如下的代碼:

var storage = window.localStorage; storage.key1 = "hello";

storage["key2"] = "world";

console.log(storage.key1);

console.log(storage["key2"]);


五奴曙、localStorage和sessionStorage的key和length屬性實現(xiàn)遍歷

sessionStorage和localStorage提供的key()和length可以方便的實現(xiàn)存儲的數(shù)據(jù)遍歷,例如下面的代碼:

var storage = window.localStorage;

for (var i=0, len = storage.length; i < len; i++)

{

var key = storage.key(i);

var value = storage.getItem(key);

console.log(key + "=" + value);

}


六草讶、storage事件

storage還提供了storage事件洽糟,當鍵值改變或者clear的時候,就可以觸發(fā)storage事件堕战,如下面的代碼就添加了一個storage事件改變的監(jiān)聽:

代碼如下:

if(window.addEventListener){

window.addEventListener("storage",handle_storage,false);

}

else if(window.attachEvent)

{

window.attachEvent("onstorage",handle_storage);

}

function handle_storage(e){

if(!e){e=window.event;}

}


來自http://www.jb51.net/html5/144597.html
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末坤溃,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子嘱丢,更是在濱河造成了極大的恐慌薪介,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,591評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件越驻,死亡現(xiàn)場離奇詭異汁政,居然都是意外死亡,警方通過查閱死者的電腦和手機缀旁,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,448評論 3 392
  • 文/潘曉璐 我一進店門记劈,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人诵棵,你說我怎么就攤上這事抠蚣。” “怎么了履澳?”我有些...
    開封第一講書人閱讀 162,823評論 0 353
  • 文/不壞的土叔 我叫張陵嘶窄,是天一觀的道長。 經(jīng)常有香客問我距贷,道長柄冲,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,204評論 1 292
  • 正文 為了忘掉前任忠蝗,我火速辦了婚禮现横,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己戒祠,他們只是感情好骇两,可當我...
    茶點故事閱讀 67,228評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著姜盈,像睡著了一般低千。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上馏颂,一...
    開封第一講書人閱讀 51,190評論 1 299
  • 那天示血,我揣著相機與錄音,去河邊找鬼救拉。 笑死难审,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的亿絮。 我是一名探鬼主播告喊,決...
    沈念sama閱讀 40,078評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼壹无!你這毒婦竟也來了葱绒?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,923評論 0 274
  • 序言:老撾萬榮一對情侶失蹤斗锭,失蹤者是張志新(化名)和其女友劉穎地淀,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體岖是,經(jīng)...
    沈念sama閱讀 45,334評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡帮毁,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,550評論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了豺撑。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片烈疚。...
    茶點故事閱讀 39,727評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖聪轿,靈堂內(nèi)的尸體忽然破棺而出爷肝,到底是詐尸還是另有隱情,我是刑警寧澤陆错,帶...
    沈念sama閱讀 35,428評論 5 343
  • 正文 年R本政府宣布灯抛,位于F島的核電站,受9級特大地震影響音瓷,放射性物質(zhì)發(fā)生泄漏对嚼。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,022評論 3 326
  • 文/蒙蒙 一绳慎、第九天 我趴在偏房一處隱蔽的房頂上張望纵竖。 院中可真熱鬧漠烧,春花似錦、人聲如沸靡砌。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,672評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽通殃。三九已至摆舟,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間邓了,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,826評論 1 269
  • 我被黑心中介騙來泰國打工媳瞪, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留骗炉,地道東北人。 一個月前我還...
    沈念sama閱讀 47,734評論 2 368
  • 正文 我出身青樓蛇受,卻偏偏與公主長得像句葵,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子兢仰,可洞房花燭夜當晚...
    茶點故事閱讀 44,619評論 2 354

推薦閱讀更多精彩內(nèi)容