cookie、sessionStorage、localStorage區別

Y__發表於2017-12-27

隨著網際網路的快速發展,基於網頁的應用越來越普遍,同時也變的越來越複雜,為了滿足各種各樣的需求,會經常性在本地儲存大量的資料,傳統方式我們以document.cookie來進行儲存的,但是由於其儲存大小隻有4k左右,並且解析也相當的複雜,每一次傳送請求都會攜帶上cookie,會造成頻寬的浪費,給開發帶來諸多不便,HTML5規範則提出解決方案。 web儲存的含義是將資料儲存到使用者的電腦上,這樣可以緩解伺服器的壓力,並且提高體驗 ####特性 1、設定、讀取方便 2、容量較大,sessionStorage約5M、localStorage約20M 3、只能儲存字串,可以將物件JSON.stringify() 編碼後儲存 ####window.sessionStorage 1、生命週期為關閉當前頁面視窗 2、不能多視窗下資料可以共享 (同源策略,百度家的local阿里他們家是拿不到) 補充:通過跳轉可以 運用場景: 頁面跳轉的時候可以通過session實現資料共享 在一些單頁面(spa)的運用中,進行頁面傳值的時候比較有用 ####window.localStorage 1、永久生效,除非手動刪除或用程式碼刪除 2、可以多視窗共享(同源策略) 運用場景:一些不涉及到安全的一些資料(不要太過龐大)都可以儲存到本地 ####方法詳解 setItem(key, value)設定儲存內容

getItem(key)讀取儲存內容

removeItem(key)刪除鍵值為 key 的儲存內容

clear()清空所有儲存內容

key(n) 以索引值來獲取 鍵名

length  儲存的資料的個數

區別: cookie資料始終在同源的http請求中攜帶(即使不需要),即 cookie在瀏覽器和伺服器間來回傳遞。而sessionStorage和localStorage不會自動把資料發給伺服器,僅在本地儲存。cookie資料還有路徑(path)的概念,可以限制cookie只屬於某個路徑下。儲存大小限制也不同,cookie資料不能超過4k,同時因為每次http請求都會攜帶 cookie,所以cookie只適合儲存很小的資料,如會話標識。sessionStorage和localStorage 雖然也有儲存大小的限制,但比cookie大得多,可以達到5M或更大。資料有效期不同,sessionStorage:僅在當前瀏覽器視窗關閉前有效,自然也就不可能持久保持;localStorage:始終有效,視窗或瀏覽器關閉也一直儲存,因此用作持久資料;cookie只在設定的cookie過期時間之前一直有效,即使視窗或瀏覽器關閉。作用域不同,sessionStorage不能在不同的瀏覽器視窗中共享,即使是同一個頁面;localStorage 在所有同源視窗中都是共享的;cookie也是在所有同源視窗中都是共享的。

差異性:(面試經常問)
相同點:都是儲存資料,儲存在web端,並且都是同源
不同點:
(1)cookie 只有4K 小 並且每一次請求都會帶上cookie 體驗不好,浪費頻寬
(2)session和local直接儲存在本地,請求不會攜帶,並且容量比cookie要大的多
(3)session 是臨時會話,當視窗被關閉的時候就清除掉 ,而 local永久存在,cookie有過期時間
(4)cookie 和local都可以支援多視窗共享,而session不支援多視窗共享 但是都支援a連結跳轉的新視窗
複製程式碼

相關文章