HTML5本地存儲(chǔ)

這次項(xiàng)目做的很炸拳氢。缩搅。。無(wú)時(shí)無(wú)刻修改bug···有點(diǎn)煩躁迷亂
項(xiàng)目中遇到了一種情況:后一個(gè)頁(yè)面需要獲取前一個(gè)頁(yè)面的值猖腕,自己知道需要本地存儲(chǔ)拆祈,但是以前對(duì)本地存儲(chǔ)只是定義上的理解 沒(méi)有實(shí)際用過(guò),然后決定自己在看一看哪幾種本地存儲(chǔ)整理一下谈息。缘屹。。

cookie

生命期為只在設(shè)置的cookie過(guò)期時(shí)間之前一直有效侠仇,即使窗口或?yàn)g覽器關(guān)閉轻姿。 存放數(shù)據(jù)大小為4K左右 。有個(gè)數(shù)限制(各瀏覽器不同)逻炊,一般為50個(gè)左右互亮。與服務(wù)器端通信:每次都會(huì)攜帶在HTTP頭中,如果使用cookie保存過(guò)多數(shù)據(jù)會(huì)帶來(lái)性能問(wèn)題余素。但Cookie需要程序員自己封裝豹休,源生的Cookie接口不友好

SessionStorage(會(huì)話級(jí)別的本地存儲(chǔ))

在Html5中增加了一個(gè)Js對(duì)象:sessionStorage;通過(guò)此對(duì)象可以直接操作存儲(chǔ)在瀏覽器中的會(huì)話級(jí)別的WebStorage桨吊。存儲(chǔ)在sessionStorage中的數(shù)據(jù)首先是Key-Value形式的威根,另外就是它跟瀏覽器當(dāng)前會(huì)話相關(guān)凤巨,僅在當(dāng)前會(huì)話下有效,關(guān)閉頁(yè)面或?yàn)g覽器后被清除洛搀。跟未設(shè)置過(guò)期時(shí)間的Cookie類似敢茁。sessionStorage 的生命周期是在瀏覽器關(guān)閉前。也就是說(shuō)留美,在整個(gè)瀏覽器未關(guān)閉前彰檬,其數(shù)據(jù)一直都是存在的。存放數(shù)據(jù)大小為一般為5MB,而且它僅在客戶端(即瀏覽器)中保存谎砾,不參與和服務(wù)器的通信逢倍。源生接口可以接受,亦可再次封裝來(lái)對(duì)Object和Array有更好的支持景图。

localStorage(永久本地存儲(chǔ))

在最新的JS的API中增加了localStorage對(duì)象较雕,以便于用戶存儲(chǔ)永久存儲(chǔ)的Web端的數(shù)據(jù)。而且數(shù)據(jù)不會(huì)隨著Http請(qǐng)求發(fā)送到后臺(tái)服務(wù)器症歇,而且存儲(chǔ)數(shù)據(jù)的大小機(jī)會(huì)不用考慮郎笆,因?yàn)樵贖TML5的標(biāo)準(zhǔn)中要求瀏覽器至少要支持到4MB.所以谭梗,這完全是顛覆了Cookie的限制忘晤,為Web應(yīng)用在本地存儲(chǔ)復(fù)雜的用戶痕跡數(shù)據(jù)提供非常方便的技術(shù)支持。

SessionStorage和LocalStorage都屬于web storage,其功能卻比cookie強(qiáng)大的多激捏。cookie的大小只有4Kb左右(瀏覽器不同设塔,大小也不同),而web Storage的大小有5MB远舅。其API提供的方法有以下幾種:

setItem (key, value) ——  保存數(shù)據(jù)闰蛔,以鍵值對(duì)的方式儲(chǔ)存信息。
getItem (key) ——  獲取數(shù)據(jù)图柏,將鍵值傳入序六,即可獲取到對(duì)應(yīng)的value值。
removeItem (key) ——  刪除單個(gè)數(shù)據(jù)蚤吹,根據(jù)鍵值移除對(duì)應(yīng)的信息例诀。
clear () ——  刪除所有的數(shù)據(jù)
key (index) —— 獲取某個(gè)索引的key

localStorage例子:

var storage = null;  
    if(window.localStorage){              //判斷瀏覽器是否支持localStorage  
       storage = window.localStorage;       
       storage.setItem("name", "Rick");    //調(diào)用setItem方法,存儲(chǔ)數(shù)據(jù)  
       alert(storage.getItem("name"));     //調(diào)用getItem方法裁着,彈框顯示 name 為 Rick  
       storage.removeItem("name");     //調(diào)用removeItem方法繁涂,移除數(shù)據(jù)  
       alert(storage.getItem("name"));   //調(diào)用getItem方法,彈框顯示 name 為 null  
  
    }  

SessionStorage用法同上二驰,不過(guò)區(qū)別在于 sessionStorage 在關(guān)閉頁(yè)面后即被清空扔罪,而 localStorage 則會(huì)一直保存。

Cookie桶雀、session和localStorage的區(qū)別

cookie的內(nèi)容主要包括:名字矿酵、值唬复、過(guò)期時(shí)間、路徑和域全肮。路徑與域一起構(gòu)成cookie的作用范圍盅抚。若不設(shè)置時(shí)間,則表示這個(gè)cookie的生命期為瀏覽器會(huì)話期間倔矾,關(guān)閉瀏覽器窗口妄均,cookie就會(huì)消失。這種生命期為瀏覽器會(huì)話期的cookie被稱為會(huì)話cookie哪自。
會(huì)話cookie一般不存儲(chǔ)在硬盤而是保存在內(nèi)存里丰包,當(dāng)然這個(gè)行為并不是規(guī)范規(guī)定的。若設(shè)置了過(guò)期時(shí)間壤巷,瀏覽器就會(huì)把cookie保存到硬盤上邑彪,關(guān)閉后再打開(kāi)瀏覽器這些cookie仍然有效直到超過(guò)設(shè)定的過(guò)期時(shí)間。對(duì)于保存在內(nèi)存里的cookie胧华,不同的瀏覽器有不同的處理方式session機(jī)制寄症。
當(dāng)程序需要為某個(gè)客戶端的請(qǐng)求創(chuàng)建一個(gè)session時(shí),服務(wù)器首先檢查這個(gè)客戶端的請(qǐng)求里是否已包含了一個(gè)session標(biāo)識(shí)(稱為session id)矩动,如果已包含則說(shuō)明以前已經(jīng)為此客戶端創(chuàng)建過(guò)session有巧,服務(wù)器就按照session id把這個(gè)session檢索出來(lái)使用(檢索不到,會(huì)新建一個(gè))悲没,如果客戶端請(qǐng)求不包含session id篮迎,則為客戶端創(chuàng)建一個(gè)session并且生成一個(gè)與此session相關(guān)聯(lián)的session id,session id的值應(yīng)該是一個(gè)既不會(huì)重復(fù)示姿,又不容易被找到規(guī)律以仿造的字符串甜橱,這個(gè)session id將被在本次響應(yīng)中返回給客戶端保存。保存這個(gè)session id的方式可以采用cookie栈戳,這樣在交互過(guò)程中瀏覽器可以自動(dòng)的按照規(guī)則把這個(gè)標(biāo)識(shí)發(fā)送給服務(wù)器岂傲。

cookie和session的區(qū)別:

1、cookie數(shù)據(jù)存放在客戶的瀏覽器上子檀,session數(shù)據(jù)放在服務(wù)器上
2镊掖、cookie不是很安全,別人可以分析存放在本地的cookie并進(jìn)行cookie欺騙命锄,考慮到安全應(yīng)當(dāng)使用session
3堰乔、session會(huì)在一定時(shí)間內(nèi)保存在服務(wù)器上,當(dāng)訪問(wèn)增多脐恩,會(huì)比較占用你服務(wù)器的性能镐侯,考慮到減輕服務(wù)器性能方面,應(yīng)當(dāng)使用cookie
4、單個(gè)cookie保存的數(shù)
據(jù)不能超過(guò)4K苟翻,很多瀏覽器都限制一個(gè)站點(diǎn)最多保存20個(gè)cookie
5韵卤、建議將登錄信息等重要信息存放為session,其他信息如果需要保留崇猫,可以放在cookie中
6沈条、session保存在服務(wù)器,客戶端不知道其中的信心诅炉;cookie保存在客戶端蜡歹,服務(wù)器能夠知道其中的信息
7、session中保存的是對(duì)象涕烧,cookie中保存的是字符串
8月而、session不能區(qū)分路徑,同一個(gè)用戶在訪問(wèn)一個(gè)網(wǎng)站期間议纯,所有的session在任何一個(gè)地方都可以訪問(wèn)到父款,而cookie中如果設(shè)置了路徑參數(shù),那么同一個(gè)網(wǎng)站中不同路徑下的cookie互相是訪問(wèn)不到的*

web Storage和Cookie的區(qū)別

Web Storage的概念和cookie相似瞻凤,區(qū)別是它是為了更大容量存儲(chǔ)設(shè)計(jì)的憨攒,cookie的大小是受限的,并且每次請(qǐng)求一個(gè)新的頁(yè)面的時(shí)候cookie都會(huì)被發(fā)送過(guò)去阀参,這樣無(wú)形中浪費(fèi)了帶寬肝集,另外cookie還需要指定作用域,不可跨域調(diào)用结笨。
除此之外包晰,web storage擁有setItem,getItem,removeItem,clear等方法,不像cookie需要前端開(kāi)發(fā)者自己封裝setCookie炕吸,getCookie。
但是cookie也是不可或缺的勉痴,cookie的作用是與服務(wù)器進(jìn)行交互赫模,作為http規(guī)范的一部分而存在的,而web Storage僅僅是為了在本地“存儲(chǔ)”數(shù)據(jù)而生
sessionStorage蒸矛、localStorage瀑罗、cookie都是在瀏覽器端存儲(chǔ)的數(shù)據(jù),其中sessionStorage的概念很特別雏掠,引入了一個(gè)“瀏覽器窗口”的概念斩祭,sessionStorage是在同源的同窗口中,始終存在的數(shù)據(jù)乡话,也就是說(shuō)只要這個(gè)瀏覽器窗口沒(méi)有關(guān)閉摧玫,即使刷新頁(yè)面或進(jìn)入同源另一個(gè)頁(yè)面,數(shù)據(jù)仍然存在绑青,關(guān)閉窗口后诬像,sessionStorage就會(huì)被銷毀屋群,同時(shí)“獨(dú)立”打開(kāi)的不同窗口,即使是同一頁(yè)面坏挠,sessionStorage對(duì)象也是不同的

Web Storage帶來(lái)的好處:

1芍躏、減少網(wǎng)絡(luò)流量:一旦數(shù)據(jù)保存在本地之后,就可以避免再向服務(wù)器請(qǐng)求數(shù)據(jù)降狠,因此減少不必要的數(shù)據(jù)請(qǐng)求对竣,減少數(shù)

據(jù)在瀏覽器和服務(wù)器間不必要的來(lái)回傳遞
2、快速顯示數(shù)據(jù):性能好榜配,從本地讀數(shù)據(jù)比通過(guò)網(wǎng)絡(luò)從服務(wù)器上獲得數(shù)據(jù)快得多柏肪,本地?cái)?shù)據(jù)可以及時(shí)獲得,再加上網(wǎng)

頁(yè)本身也可以有緩存芥牌,因此整個(gè)頁(yè)面和數(shù)據(jù)都在本地的話烦味,可以立即顯示
3、臨時(shí)存儲(chǔ):很多時(shí)候數(shù)據(jù)只需要在用戶瀏覽一組頁(yè)面期間使用壁拉,關(guān)閉窗口后數(shù)據(jù)就可以丟棄了谬俄,這種情況使用sessionStorage非常方便

瀏覽器本地存儲(chǔ)與服務(wù)器端存儲(chǔ)的區(qū)別

其實(shí)數(shù)據(jù)既可以在瀏覽器本地存儲(chǔ),也可以在服務(wù)器端存儲(chǔ)
瀏覽器可以保存一些數(shù)據(jù)弃理,需要的時(shí)候直接從本地存取溃论,sessionStorage、localStorage和cookie都是由瀏覽器存儲(chǔ)在本地的數(shù)據(jù)
服務(wù)器端也可以保存所有用戶的所有數(shù)據(jù)痘昌,但需要的時(shí)候?yàn)g覽器要向服務(wù)器請(qǐng)求數(shù)據(jù)钥勋。
1、服務(wù)器端可以保存用戶的持久數(shù)據(jù)辆苔,如數(shù)據(jù)庫(kù)和云存儲(chǔ)將用戶的大量數(shù)據(jù)保存在服務(wù)器端
2算灸、服務(wù)器端也可以保存用戶的臨時(shí)會(huì)話數(shù)據(jù),服務(wù)器端的session機(jī)制驻啤,如jsp的session對(duì)象菲驴,數(shù)據(jù)保存在服務(wù)器上,

實(shí)際上骑冗,服務(wù)器和瀏覽器之間僅需傳遞session id即可赊瞬,服務(wù)器根據(jù)session id找到對(duì)應(yīng)用戶的session對(duì)象,會(huì)話數(shù)據(jù)僅在一段時(shí)間內(nèi)有效贼涩,這個(gè)時(shí)間就是server端設(shè)置的session有效期

服務(wù)器端保存所有的用戶的數(shù)據(jù)巧涧,所以服務(wù)器端的開(kāi)銷較大,而瀏覽器端保存則把不同用戶需要的數(shù)據(jù)分別保存在用戶各自的瀏覽器中遥倦,瀏覽器端一般只用來(lái)存儲(chǔ)小數(shù)據(jù)谤绳,而非服務(wù)可以存儲(chǔ)大數(shù)據(jù)或小數(shù)據(jù)服務(wù)器存儲(chǔ)數(shù)據(jù)安全一些,瀏覽器只適合存儲(chǔ)一般數(shù)據(jù)

sessionStorage、localStorage和cookie的區(qū)別

共同點(diǎn):都是保存在瀏覽器端闷供、且同源的
區(qū)別:
1烟央、cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶(即使不需要),即cookie在瀏覽器和服務(wù)器間來(lái)回傳遞歪脏,而sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)送給服務(wù)器疑俭,僅在本地保存。cookie數(shù)據(jù)還有路徑(path)的概念婿失,可以限制cookie只屬于某個(gè)路徑下
2钞艇、存儲(chǔ)大小限制也不同,cookie數(shù)據(jù)不能超過(guò)4K豪硅,同時(shí)因?yàn)槊看蝖ttp請(qǐng)求都會(huì)攜帶cookie哩照、所以cookie只適合保存很小的數(shù)據(jù),如會(huì)話標(biāo)識(shí)懒浮。sessionStorage和localStorage雖然也有存儲(chǔ)大小的限制飘弧,但比cookie大得多,可以達(dá)到5M或更大
3砚著、數(shù)據(jù)有效期不同次伶,sessionStorage:僅在當(dāng)前瀏覽器窗口關(guān)閉之前有效;localStorage:始終有效稽穆,窗口或?yàn)g覽器關(guān)閉也一直保存冠王,因此用作持久數(shù)據(jù);cookie:只在設(shè)置的cookie過(guò)期時(shí)間之前有效舌镶,即使窗口關(guān)閉或?yàn)g覽器關(guān)閉
4柱彻、作用域不同,sessionStorage不在不同的瀏覽器窗口中共享餐胀,即使是同一個(gè)頁(yè)面哟楷;localstorage在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的
5骂澄、web Storage支持事件通知機(jī)制吓蘑,可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽(tīng)者
6、web Storage的api接口使用更方便

sessionStorage與頁(yè)面js數(shù)據(jù)對(duì)象的區(qū)別

頁(yè)面中一般的js對(duì)象的生存期僅在當(dāng)前頁(yè)面有效坟冲,因此刷新頁(yè)面或轉(zhuǎn)到另一頁(yè)面這樣的重新加載頁(yè)面的情況,數(shù)據(jù)就不存在了
而sessionStorage只要同源的同窗口中溃蔫,刷新頁(yè)面或進(jìn)入同源的不同頁(yè)面健提,數(shù)據(jù)始終存在,也就是說(shuō)只要瀏覽器不關(guān)閉伟叛,數(shù)據(jù)仍然存在

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末私痹,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌紊遵,老刑警劉巖账千,帶你破解...
    沈念sama閱讀 222,378評(píng)論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異暗膜,居然都是意外死亡匀奏,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,970評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門学搜,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)娃善,“玉大人,你說(shuō)我怎么就攤上這事瑞佩【刍牵” “怎么了?”我有些...
    開(kāi)封第一講書人閱讀 168,983評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵炬丸,是天一觀的道長(zhǎng)瘫寝。 經(jīng)常有香客問(wèn)我,道長(zhǎng)稠炬,這世上最難降的妖魔是什么焕阿? 我笑而不...
    開(kāi)封第一講書人閱讀 59,938評(píng)論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮酸纲,結(jié)果婚禮上捣鲸,老公的妹妹穿的比我還像新娘。我一直安慰自己闽坡,他們只是感情好栽惶,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,955評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著疾嗅,像睡著了一般外厂。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上代承,一...
    開(kāi)封第一講書人閱讀 52,549評(píng)論 1 312
  • 那天汁蝶,我揣著相機(jī)與錄音,去河邊找鬼论悴。 笑死掖棉,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的膀估。 我是一名探鬼主播幔亥,決...
    沈念sama閱讀 41,063評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼察纯!你這毒婦竟也來(lái)了帕棉?” 一聲冷哼從身側(cè)響起针肥,我...
    開(kāi)封第一講書人閱讀 39,991評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎香伴,沒(méi)想到半個(gè)月后慰枕,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,522評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡即纲,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,604評(píng)論 3 342
  • 正文 我和宋清朗相戀三年具帮,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片崇裁。...
    茶點(diǎn)故事閱讀 40,742評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡匕坯,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出拔稳,到底是詐尸還是另有隱情葛峻,我是刑警寧澤,帶...
    沈念sama閱讀 36,413評(píng)論 5 351
  • 正文 年R本政府宣布巴比,位于F島的核電站术奖,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏轻绞。R本人自食惡果不足惜采记,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,094評(píng)論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望政勃。 院中可真熱鬧唧龄,春花似錦、人聲如沸奸远。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 32,572評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)懒叛。三九已至丸冕,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間薛窥,已是汗流浹背胖烛。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,671評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留诅迷,地道東北人佩番。 一個(gè)月前我還...
    沈念sama閱讀 49,159評(píng)論 3 378
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像罢杉,于是被迫代替她去往敵國(guó)和親答捕。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,747評(píng)論 2 361

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