cookie，localStorage，sessionStorage 的區別

cookie 是在 HTML4 中使用的給客戶端保存數據的，也可以和 session 配合實現跟蹤瀏覽器用戶身份；
而 webstorage（包括：localStorage和sessionStorage）是在HTML5提出來的，純粹爲了保存數據，不會與服務器端通信。

WebStorage兩個主要目標：

1. 提供一種在cookie之外存儲會話數據的路徑。
2. 提供一種存儲大量可以跨會話存在的數據的機制。

相同點

cookie，localStorage，sessionStorage都是在客戶端 保存數據 的，存儲數據的類型：都是字符串。

不通點

1. 生命週期：
   1.1 cookie如果不設置有效期，那麼就是臨時存儲（存儲在內存中），是會話級別的，會話結束後，cookie也就失效了，如果設置了有效期，那麼cookie存儲在硬盤裏，有效期到了，就自動消失了。
   1.2 localStorage的生命週期是永久的，關閉頁面或瀏覽器之後 localStorage中的數據也不會消失。localStorage除非主動刪除數據，否則數據永遠不會消失。
   1.3 sessionStorage僅在當前會話下有效。sessionStorage引入了一個瀏覽器窗口的概念，sessionStorage是在同源的窗口中始終存在的數據。只要這個瀏覽器窗口沒有關閉，即使刷新頁面或者進入同源另一個頁面，數據依然存在。但是sessionStorage在關閉了瀏覽器窗口後就會被銷燬。同時獨立的打開同一個窗口同一個頁面，sessionStorage也是不一樣的。
   可以簡單的理解爲：sessionStorage，沒有設置有效期的cookie。
   如果說把cookie的有效期設置爲永遠永遠，永久，那麼就是localStorage。
   cookie沒有設置有效期，那麼就是sessionStorage。

2. 網絡流量：cookie的數據每次都會發給服務器端，而localstorage和sessionStorage不會與服務器端通信，純粹爲了保存數據，所以，webstorage更加節約網絡流量。

3. 大小限制：cookie大小限制在4KB，非常小；localstorage和sessionStorage在5M。

4. 安全性：WebStorage不會隨着HTTP header發送到服務器端，所以安全性相對於cookie來說比較高一些，不會擔心截獲。

5. 使用方便性上：WebStorage提供了一些方法，數據操作比cookie方便；

• setItem (key, value)—— 保存數據，以鍵值對的方式儲存信息。
• getItem (key) —— 獲取數據，將鍵值傳入，即可獲取到對應的value值。
• removeItem (key) —— 刪除單個數據，根據鍵值移除對應的信息。
• clear () —— 刪除所有的數據
• key (index) —— 獲取某個索引的key