:【HTML/JS】本地存儲(chǔ)cookies,sessionStorage和localStorage的區(qū)別 cookie是網(wǎng)站為了標(biāo)示用戶身份而儲(chǔ)存在用戶本地終端 (Client Side)上的數(shù)據(jù)(通常經(jīng)過(guò)加密)。
cookie數(shù)據(jù)始終在同源 的http請(qǐng)求中攜帶(即使不需要),都會(huì)在瀏覽器和服務(wù)器間來(lái)回傳遞。
sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器,僅在本地保存 。
存儲(chǔ)大小:
cookie數(shù)據(jù)大小不能超過(guò)4k 。
sessionStorage和localStorage 雖然也有存儲(chǔ)大小的限制,但比cookie大得多,可以達(dá)到5M 或更大。
有期時(shí)間:
localStorage 存儲(chǔ)持久數(shù)據(jù) ,瀏覽器關(guān)閉后數(shù)據(jù)不丟失 除非主動(dòng)刪除數(shù)據(jù);
sessionStorage 數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動(dòng)刪除 。
cookie 設(shè)置的cookie過(guò)期時(shí)間 之前一直有效,即使窗口或?yàn)g覽器關(guān)閉
cookie的弊端 cookie雖然在持久保存客戶端數(shù)據(jù)提供了方便,分擔(dān)了服務(wù)器存儲(chǔ)的負(fù)擔(dān),但還是有很多局限性的。
第一 :每個(gè)特定的域名下最多生成20 個(gè)cookie
1.IE6或更低版本最多20個(gè)cookie
2.IE7和之后的版本最后可以有50個(gè)cookie。
3.Firefox最多50個(gè)cookie
4.chrome和Safari沒(méi)有做硬性限制
IE和Opera 會(huì)清理近期最少使用的cookie,F(xiàn)irefox會(huì)隨機(jī)清理cookie。
cookie的最大大約為4096字節(jié),為了兼容性,一般不能超過(guò)4095字節(jié)。
IE 提供了一種存儲(chǔ)可以持久化用戶數(shù)據(jù),叫做userdata ,從IE5.0就開(kāi)始支持。每個(gè)數(shù)據(jù)最多128K,每個(gè)域名下最多1M。這個(gè)持久化數(shù)據(jù)放在緩存中,如果緩存沒(méi)有清理,那么會(huì)一直存在。
安全性問(wèn)題。如果cookie被人攔截了,那人就可以取得所有的session信息。即使加密也與事無(wú)補(bǔ),因?yàn)閿r截者并不需要知道cookie的意義,他只要原樣轉(zhuǎn)發(fā)cookie就可以達(dá)到目的了。
有些狀態(tài)不可能保存在客戶端。例如,為了防止重復(fù)提交表單,我們需要在服務(wù)器端保存一個(gè)計(jì)數(shù)器。如果我們把這個(gè)計(jì)數(shù)器保存在客戶端,那么它起不到任何作用。
cookie的優(yōu)點(diǎn) 極高的擴(kuò)展性和可用性
1.通過(guò)良好的編程,控制保存在cookie中的session對(duì)象的大小。
2.通過(guò)加密和安全傳輸技術(shù)(SSL),減少cookie被破解的可能性。
3.只在cookie中存放不敏感數(shù)據(jù),即使被盜也不會(huì)有重大損失。
4.控制cookie的生命期,使之不會(huì)永遠(yuǎn)有效。偷盜者很可能拿到一個(gè)過(guò)期的cookie。
簡(jiǎn)潔畫(huà)圖:
瀏覽器本地存儲(chǔ) 在較高版本的瀏覽器中,js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage來(lái)取代globalStorage。
html`中的Web Storage 包括了兩種存儲(chǔ)方式:sessionStorage和localStorage。
sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話(session)中的數(shù)據(jù),這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁(yè)面才能訪問(wèn)并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷(xiāo)毀 。因此sessionStorage不是一種持久化的本地存儲(chǔ),僅僅是會(huì)話級(jí)別的存儲(chǔ)。
而localStorage用于持久化 的本地存儲(chǔ),除非主動(dòng)刪除數(shù)據(jù),否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過(guò)期的。
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)行交互,作為HTT`規(guī)范的一部分而存在 ,而Web Storage僅僅是為了在本地“存儲(chǔ)”數(shù)據(jù)而生。
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中
大總結(jié) 客戶端存儲(chǔ)及他們的異同
(補(bǔ)充開(kāi)頭部分:cookie, sessionStorage和localStorage等)
共同點(diǎn):
都是保存在瀏覽器端,且同源的。
區(qū)別:
1.cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶(即使不需要),即cookie在瀏覽器和服務(wù)器間來(lái)回傳遞。而sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器,僅在本地保存。
2.cookie數(shù)據(jù)還有路徑(path)的概念,可以限制cookie只屬于某個(gè)路徑下。
3.存儲(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大得多,一般為5M左右。
4.數(shù)據(jù)有效期不同,sessionStorage僅在當(dāng)前瀏覽器窗口關(guān)閉前有效,自然也就不可能持久保持;localStorage始終有效(除非清除),窗口或?yàn)g覽器關(guān)閉也一直保存,因此用作持久數(shù)據(jù);cookie只在設(shè)置的cookie過(guò)期時(shí)間之前一直有效,即使窗口或?yàn)g覽器關(guān)閉。
5.作用域不同,sessionStorage不在不同 的瀏覽器窗口 中共享,即使是同一個(gè)頁(yè)面;localStorage 在所有同源窗口中都是共享 的;cookie也是在所有同源窗口中都是共享的。
6.Web Storage 支持事件通知機(jī)制(storage事件),可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽(tīng)者。Web Storage 的 api 接口使用更方便。
簡(jiǎn)單測(cè)試:
如有不足之處,歡迎批評(píng)指正。
該文章在 2023/3/20 12:09:32 編輯過(guò)