Cookie

• 是個小型文字檔 ( 限制 4k )
• 當瀏覽器發送 Request 到 Server 之後，回傳的 Response header 之中會帶有一個 Set-Cookie 的資料，只要瀏覽器看到這個資料，就會把 Cookie 寫進來。
• 當瀏覽器再發送 Reqeust 時，會自動把 cookie 帶到 Server 端。
  為了讓 Server 可以辨識使用者身份，所有 request 都會自動把該 domain 的 Cookie 帶上去。
• 第一次登入需要輸入帳號密碼
• 第二次登入帶著 Cookie (通行證) ，就不用再登入一次

LocalStorage

• 最推薦也最簡單的資料儲存方法。
  儲存資料容量至少5MB以上，比Cookie大很多
  形式：key → value
  key 跟 value 必須是字串，如果是 object 或 number 會自動轉換成 string
  存取 JSON 格式要先經過轉換。
• 生命週期：沒有過期問題，除非手動刪除
  即使關掉分頁、關掉瀏覽器再打開也都還在。
  不像 Cookie 會隨著 Request 送到 Server 端，Storage 只作用在 Client 端瀏覽器
  適合儲存較複雜且不敏感的資料 ( 喜好設定、顏色樣式等等 )

操作 API

• 設置資料：localStorage.setItem(key, value)
• 取得資料：let storageValue = localStorage.getItem(key, value)
• 清除資料：localStorage.removeItem(key)
• 清除全部資料：localStorage.clear()

SessionStorage

• 生命週期： 只儲存在瀏覽器同一個分頁還開啟著的狀態下，把分頁關掉、到另一個分頁就沒有作用了。

• 因為不同分頁是不能共享 SessionStorage，所以通常拿來儲存更短期的資訊。

• 注意：以上的三種「 瀏覽器儲存空間 」的資料儲存方式是會依據「 網站 」來儲存，不同 domain 無法共享這些儲存在 Client 端的資料。

參考資料：
[Html 5] WebStorage - localStorage和sessionStorage 基本使用方法
JS30-Day15-LocalStorage