H5存儲方案——cookie、session、SessionStorage和LocalStorage


1.簡述
瀏覽器端存儲網頁中的數據有三種存儲方案:cookie、SessionStorage和LocalStorage。
其中:SessionStorage和LocalStorage是H5新增的存儲方案。
而cookie經常同session一並提起,它們的主要區別:

cookie:會話跟蹤技術 客戶端(瀏覽器)
session;會話跟蹤技術 服務端
也就是說session一般用於服務器端進行會話跟蹤,並不是前端使用的技術,在此不細談。

2.cookie、SessionStorage、LocalStorage作用:
可以將網頁中的數據保存到瀏覽器中

4.Cookie、 SessionStorage、LocalStorage區別
4.1、生命周期(同一瀏覽器下)

  Cookie  SessionStorage LocalStorage
生命周期  默認是關閉瀏覽器后失效, 但是也可以設置過期時間 僅在當前會話(窗口)下有效,關閉窗口或瀏覽器后被清除, 不能設置過期時間 除非被清除,否則永久保存


4.2、容量

  Cookie  SessionStorage LocalStorage
容量  有大小(4KB左右)和個數(20~50)限制 有大小限制(5M左右) http://dev-test.nemikor.com/web-storage/support-test/  有大小限制(5M左右) http://dev-test.nemikor.com/web-storage/support-test/


4.3、網絡請求

   Cookie  SessionStorage  LocalStorage
網絡請求  每次都會攜帶在HTTP頭中,如果使用cookie保存過多數據會帶來性能問題  僅在瀏覽器中保存,不參與和服務器的通信  僅在瀏覽器中保存,不參與和服務器的通信 

5、Cookie、 SessionStorage、LocalStorage應用場景
Cookie: 判斷用戶是否登錄——便於本地對cookie的存儲、判斷,還能發送給服務器,服務器進行進一步的驗證。實現雙重驗證
LocalStorage: 購物車——容量大,永久存儲
sessionStorage: 表單數據——容量大,本次會話一直保存,返回時填寫數據仍然在

6、注意點:
無論通過以上那種方式存儲的數據, 切記不能將敏感數據直接存儲到本地
LocalStorage只能存儲字符串,不能存儲數組,需要將數組轉為字符串再存儲。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM