前言

前端存儲的方式有很多種戈鲁，包括了離線緩存（application cache）仇参，Web SQL，IndexedDB以及本地存儲的Cookie婆殿、LocalStorage诈乒、SessionStorage，本文主要對Cookie婆芦、LocalStorage怕磨、SessionStorage這三者的作用、區(qū)別以及應用場景進行描述消约。

COOKIE

含義

Cookie又叫會話跟蹤技術肠鲫，事實上就是以Key，Value的形式存儲在瀏覽器端的數(shù)據(jù)或粮。

工作原理

1.在Request的時候导饲，瀏覽器將Cookie信息放在HTTP-Request Headers中。
2.在Response的時候氯材，瀏覽器保存HTTP-Response Headers信息中的Cookie信息渣锦。
3.Cookie的核心信息包含三個部分：Name、Value氢哮、過期時間袋毙。
4.Cookie的保存是覆蓋式的，所以Cookie的添加命浴、更新娄猫、刪除對于瀏覽器來說都是執(zhí)行設置（set）的動作。
5.存儲屬性除了Name生闲、Value媳溺、過期時間，還有Domain碍讯、Path悬蔽，當前域可以操作當前域子域、父域名的Cookie捉兴，當前Path蝎困，可以操作當前Path以及當前Path子、父Path下的Cookie

為什么需要強調它的工作原理呢倍啥？事實上cookie的作用禾乘、缺點甚至于缺點的改善都是圍繞工作原理進行的。

作用

• 會話狀態(tài)管理（如用戶登錄狀態(tài)虽缕、購物車始藕、游戲分數(shù)和其它需要記錄的信息）
• 個性化設置（如用戶自定義設置、主題等）

傳輸特點

• 每次Request客戶端符合domian以及path要求的Cookie都會通過Request Headers傳輸?shù)椒掌鞫?/li>
• 傳輸?shù)腃ookie大小會受到瀏覽器以及Web服務器的限制

安全特點

• Cookie中的信息很容易被查看，建議加密后存儲
• Cookie容易被XSS攻擊利用伍派，可以設置HttpOnly=true江耀，不允許客戶端訪問

應用

• 設置：document.cookie = 'key=val;path:/;expires='+d （d為時間）
• 獲取：document.cookie
• 刪除cookie： 將過期時間設置為負值

缺點

• 存儲大小最多4KB
• 存儲數(shù)量根據(jù)瀏覽器或瀏覽器版本的不同而不同诉植，并且每個域最多20條
• 不安全（請求頭常帶存儲信息）
• 存儲數(shù)據(jù)類型限制祥国，cookie只能存儲字符串

提高安全性措施

• 對保存到cookie里面的敏感信息必須加密
• 設置HttpOnly為true，防止Cookie值被頁面腳本讀取
• 設置Secure為true晾腔，只有在https協(xié)議下訪問的時候舌稀，瀏覽器才會發(fā)送該Cookie
• 給Cookie設置有效期（分一個長時間不活動的失效時間與即使一直在活動也要失效的時間）

Web Storage

準確地來說，因為cookie確切地存在著缺點灼擂，h5也對其進行了優(yōu)化扩借。因此localStorage和sessionStorage解決了不少cookie的缺點，也被作為本地存儲的重要方式缤至。

Web Storage API

length——數(shù)據(jù)長度
setItem (key, value) —— 保存數(shù)據(jù)，以鍵值對的方式儲存信息
getItem (key) —— 獲取數(shù)據(jù)康谆，將鍵值傳入领斥，即可獲取到對應的value值
removeItem (key) —— 刪除單個數(shù)據(jù)，根據(jù)鍵值移除對應的信息
clear () —— 刪除所有的數(shù)據(jù)
key (index) —— 獲取某個索引的key

LocalStorage

特點

• 生命周期是永久性的沃暗。即使關閉瀏覽器月洛，數(shù)據(jù)也不會銷毀
• 存儲大小一般為5M
• 需要主動去銷毀
• 儲存的對象類型均為字符串類型
• 同源可以讀取并修改localStorage數(shù)據(jù)

SessionStorage

特點

• 生命周期是在瀏覽器關閉前。即關閉瀏覽器數(shù)據(jù)就會銷毀
• 存儲大小一般為5M
• 儲存的對象類型均為字符串類型
• 只允許同一窗口訪問