web本地存儲怎么運用

這篇文章主要講解了“web本地存儲怎么運用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“web本地存儲怎么運用”吧！

　　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本地存儲怎么運用”的內容了，經過本文的學習后，相信大家對web本地存儲怎么運用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！