前言：cookie和Session都是用來跟蹤瀏覽器用戶身份的會話方式。
Cookie
由於http是無狀態的協議，一旦客戶端和服務器的數據交換完畢，就會斷開連接，再次請求連接，又需要重新驗證，所以必須找到一種方法讓服務端記住客戶端， Cookie就可以實現這種操作。
Cookie 的缺點：
- 數據安全性較低；
- 只能存儲字符串；
- 容量限制，約4KB。
Session
由於 Cookie 是服務端下發給客戶端由客戶端本地保存的。換而言之客戶端可以在本地對其隨意操作，包括刪除和修改。如果客戶端隨意僞造一個 Cookie 的話，對於服務端是無法辨別的，就會造成服務端被矇蔽，構成安全隱患。
Session 的優點：
- 數據存在服務器端，相對於比較安全；
- 服務器將Session數據保存在服務器上，而將Session的用戶id存儲在客戶端電腦上。
- Session存儲的數據類型，除了資源外的數據類型都可以；
- Session文件沒有大小限制；
session 的缺點：
- 存的東西越多，就越佔用服務器內存；
- sessionID保存在cookie，依賴於cookie，如果禁用cookie，則要使用URL重寫，不安全。
cookie 和session 的區別
- cookie數據存放在客戶的瀏覽器上，session數據放在服務器上。
- cookie不是很安全，別人可以分析存放在本地的cookie並進行cookie欺騙考慮到安全應當使用session。
- session會在一定時間內保存在服務器上。當訪問增多，會比較佔用你服務器的性能，考慮到減輕服務器性能方面，應當使用cookie。
- 單個cookie保存的數據不能超過4K，很多瀏覽器都限制一個站點最多保存20個cookie。
WebStorage
由於cookie存儲機制有很多缺點，HTML5不再使用它，轉而使用改良後的WebStorage存儲機制。
本地數據庫是HTML5中新增的一個功能，使用它可以在客戶端本地建立一個數據庫，原本必須保存在服務器端數據庫中的內容現在可以直接保存在客戶端本地了，這大大減輕了服務器端的負擔，同時也加快了訪問數據的速度。
WebStorage的兩種API
sessionStorage（會話存儲）：存儲的數據只在會話期間有效，關閉瀏覽器則自動刪除。
localStorage（本地存儲） ：本地永久性存儲數據，只能手動將其刪除或清空。
WebStorage 的優點：
- 存儲空間更大，約5MB（高版本的瀏覽器中支持）；
- 不會傳送到服務器，存儲在本地的數據可以直接獲取，減少http請求，節約帶寬；
- 安全性較高。
WebStorage 的缺點：
- IE8以上的IE版本才支持localStorage這個屬性
- 頁面刷新不會消除數據，因此存儲內容過多時頁面會變卡；
- 在瀏覽器的隱私模式下面是不可讀取的；
- 不能被爬蟲抓取到。
localStorage 方法
localStorage 和 sessionStorage，可使用的API都相同
存儲數據
localStorage.setItem('變量名'，'儲存的數據')
讀取數據
- 根據變量名讀取數據
localStorage.getItem('變量名')
- 讀取存儲在localStorage上的所有數據
localStorage.valueOf()
- 取存儲在localStorage上的第一條數據
localStorage.key(0)
刪除數據
- 刪除某個數據
localStorage.removeItem('變量名')
- 清空所有數據
localStorage.clear