Cookie

cookie機制：如果不在瀏覽器中設定過期事件，cookie被儲存在記憶體中，生命週期隨瀏覽器的關閉而結束，這種cookie簡稱為會話cookie。如果在瀏覽器中設定了cookie的過期事件，cookie會被儲存在硬碟中，關閉瀏覽器後，cookie資料仍然存在，直到過期事件結束才消失。cookie是服務端發給客戶端的特殊資訊，cookie是以文字的方式儲存在客戶端，每次請求時都帶上它。

WebStorage

WebStorage的目的是克服由cookie所帶來的一些限制，當資料需要被嚴格控制在客戶端時，不需要持續的將資料發回伺服器。

1.sessionStorage：將資料儲存在session物件中。所謂session，是指使用者在瀏覽某個網站時，從進入網站到瀏覽器關閉所經過的這段時間，也就是使用者瀏覽這個網站所花費的時間。session物件可以用來儲存在這段時間內所要求儲存的任何資料。

2.localStorage：將資料儲存在客戶端本地的硬體裝置(通常指硬碟，也可以是其他硬體裝置)中，即使瀏覽器被關閉了，該資料仍然存在，下次開啟瀏覽器訪問網站時仍然可以繼續使用。

這兩者的區別在於，sessionStorage為臨時儲存（臨時登入），而localStorage為永久儲存（長期登入）。

三者的異同

WebStorage的優點

（1）儲存空間更大：cookie為4KB，而WebStorage是5MB

（2）節省網路流量：WebStorage不會傳送到伺服器，儲存在本地的資料可以直接獲取，也不會像cookie一樣每次請求都會傳送到伺服器，所以減少了客戶端和服務端的互動，節省了網路流量

（3）對於那種只需要在使用者瀏覽一組頁面期間儲存而關閉瀏覽器後就可以丟棄的資料，sessionStorage會非常方便

（4）快速顯示：有的資料儲存在WebStorage上再加上瀏覽器本身的快取。獲取資料時可以從本地獲取會比從伺服器端獲取快得多，所以速度更快

（5）安全性：WebStorage不會隨著HTTP header傳送到伺服器端，所以安全性相對於cookie來說會比較高一些，不會擔心截獲，但是仍然存在偽造問題

（6）WebStorage提供了一些方法，資料操作比cookie方便

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