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只能存儲字符串,不能存儲數組,需要將數組轉為字符串再存儲。