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