隨著網際網路的快速發展，基於網頁的應用越來越普遍，同時也變的越來越複雜，為了滿足各種各樣的需求，會經常性在本地儲存大量的資料，傳統方式我們以document.cookie來進行儲存的，但是由於其儲存大小隻有4k左右，並且解析也相當的複雜，每一次傳送請求都會攜帶上cookie，會造成頻寬的浪費，給開發帶來諸多不便，HTML5規範則提出解決方案。

　　web儲存的含義是將資料儲存到使用者的電腦上，這樣可以緩解伺服器的壓力，並且提高體驗。

1 特性

1、設定、讀取方便。

2、容量較大，sessionStorage約5M、localStorage約20M。

3、只能儲存字串，可以將物件JSON.stringify() 編碼後儲存。

2 window.sessionStorage

1、生命週期為關閉當前頁面視窗。

2、不能多視窗下資料可以共享（同源策略，百度家的local阿里他們家是拿不到）。

補充：透過跳轉可以。

運用場景：

　 1、頁面跳轉的時候可以透過session實現資料共享。

　 2、在一些單頁面（spa）的運用中，進行頁面傳值的時候比較有用。

3 window.localStorage

1、永久生效，除非手動刪除或用程式碼刪除。

2、可以多視窗共享（同源策略）。

運用場景：一些不涉及到安全的一些資料（不要太過龐大）都可以儲存到本地。

4 方法詳解

setItem(key, value) 設定儲存內容

window.localStorage/sessionStorage.setItem(key,value);

getItem(key) 讀取儲存內容

window.localStorage/sessionStorage.getItem(key,value);

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

window.localStorage/sessionStorage.removeItem(key,value);

clear() 清空所有儲存內容

window.localStorage/sessionStorage.empty();

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

window.localStorage/sessionStorage.key(n);

length 儲存的資料的個數

window.localStorage/sessionStorage.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連結跳轉的新視窗。

web本地儲存

相關文章