這次項(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ù)仍然存在