:【HTML/JS】本地存儲cookies,sessionStorage和localStorage的區(qū)別cookie是網(wǎng)站為了標示用戶身份而儲存在用戶本地終端(Client Side)上的數(shù)據(jù)(通常經(jīng)過加密)。
cookie數(shù)據(jù)始終在同源的http請求中攜帶(即使不需要),都會在瀏覽器和服務(wù)器間來回傳遞。
sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器,僅在本地保存。
存儲大?。?/span>
cookie數(shù)據(jù)大小不能超過4k。
sessionStorage和localStorage 雖然也有存儲大小的限制,但比cookie大得多,可以達到5M或更大。
有期時間:
localStorage 存儲持久數(shù)據(jù),瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動刪除數(shù)據(jù);
sessionStorage 數(shù)據(jù)在當前瀏覽器窗口關(guān)閉后自動刪除。
cookie 設(shè)置的cookie過期時間之前一直有效,即使窗口或瀏覽器關(guān)閉
cookie的弊端
cookie雖然在持久保存客戶端數(shù)據(jù)提供了方便,分擔了服務(wù)器存儲的負擔,但還是有很多局限性的。
第一:每個特定的域名下最多生成20個cookie
1.IE6或更低版本最多20個cookie
2.IE7和之后的版本最后可以有50個cookie。
3.Firefox最多50個cookie
4.chrome和Safari沒有做硬性限制
IE和Opera 會清理近期最少使用的cookie,F(xiàn)irefox會隨機清理cookie。
cookie的最大大約為4096字節(jié),為了兼容性,一般不能超過4095字節(jié)。
IE 提供了一種存儲可以持久化用戶數(shù)據(jù),叫做userdata,從IE5.0就開始支持。每個數(shù)據(jù)最多128K,每個域名下最多1M。這個持久化數(shù)據(jù)放在緩存中,如果緩存沒有清理,那么會一直存在。
安全性問題。如果cookie被人攔截了,那人就可以取得所有的session信息。即使加密也與事無補,因為攔截者并不需要知道cookie的意義,他只要原樣轉(zhuǎn)發(fā)cookie就可以達到目的了。
有些狀態(tài)不可能保存在客戶端。例如,為了防止重復提交表單,我們需要在服務(wù)器端保存一個計數(shù)器。如果我們把這個計數(shù)器保存在客戶端,那么它起不到任何作用。
cookie的優(yōu)點
極高的擴展性和可用性
1.通過良好的編程,控制保存在cookie中的session對象的大小。
2.通過加密和安全傳輸技術(shù)(SSL),減少cookie被破解的可能性。
3.只在cookie中存放不敏感數(shù)據(jù),即使被盜也不會有重大損失。
4.控制cookie的生命期,使之不會永遠有效。偷盜者很可能拿到一個過期的cookie。
簡潔畫圖:

瀏覽器本地存儲
在較高版本的瀏覽器中,js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage來取代globalStorage。
html`中的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ù)器進行交互,作為HTT`規(guī)范的一部分而存在 ,而Web Storage僅僅是為了在本地“存儲”數(shù)據(jù)而生。
cookie 和session 的區(qū)別:
1、cookie數(shù)據(jù)存放在客戶的瀏覽器上,session數(shù)據(jù)放在服務(wù)器上。
2、cookie不是很安全,別人可以分析存放在本地的cookie并進行cookie欺騙
考慮到安全應當使用session。
3、session會在一定時間內(nèi)保存在服務(wù)器上。當訪問增多,會比較占用你服務(wù)器的性能,
考慮到減輕服務(wù)器性能方面,應當使用cookie。
4、單個cookie保存的數(shù)據(jù)不能超過4K,很多瀏覽器都限制一個站點最多保存20個cookie。
5、所以建議:
將登陸信息等重要信息存放為SESSION
其他信息如果需要保留,可以放在COOKIE中
大總結(jié)
客戶端存儲及他們的異同
(補充開頭部分:cookie, sessionStorage和localStorage等)

共同點:
都是保存在瀏覽器端,且同源的。
區(qū)別:
1.cookie數(shù)據(jù)始終在同源的http請求中攜帶(即使不需要),即cookie在瀏覽器和服務(wù)器間來回傳遞。而sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器,僅在本地保存。
2.cookie數(shù)據(jù)還有路徑(path)的概念,可以限制cookie只屬于某個路徑下。
3.存儲大小限制也不同,cookie數(shù)據(jù)不能超過4k,同時因為每次http請求都會攜帶cookie,所以cookie只適合保存很小的數(shù)據(jù),如會話標識。sessionStorage和localStorage 雖然也有存儲大小的限制,但比cookie大得多,一般為5M左右。
4.數(shù)據(jù)有效期不同,sessionStorage僅在當前瀏覽器窗口關(guān)閉前有效,自然也就不可能持久保持;localStorage始終有效(除非清除),窗口或瀏覽器關(guān)閉也一直保存,因此用作持久數(shù)據(jù);cookie只在設(shè)置的cookie過期時間之前一直有效,即使窗口或瀏覽器關(guān)閉。
5.作用域不同,sessionStorage不在不同的瀏覽器窗口中共享,即使是同一個頁面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。
6.Web Storage 支持事件通知機制(storage事件),可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽者。Web Storage 的 api 接口使用更方便。
簡單測試:

如有不足之處,歡迎批評指正。
該文章在 2023/3/20 12:09:32 編輯過