Cookie

Cookie 是一小段數據資料，它會從 Server 端設定並跟著 HTTP 的 Headers 中發送Set-cookie的選項到使用者的瀏覽器上，成為一個片段資料。這樣，當使用者再次訪問該網站時，瀏覽器會將 cookie 傳送回 Server，讓 Server 能夠記住資訊，Cookie 通常用來儲存使用者的登入狀態、個人化設定等。
因為Cookie儲存的是小片段的資料，因此有限制的大小不能超過4k

為什麼通常cookie通常用來辨識使用者登入的狀態？
狀態的維持： 因為http是始於無狀態請求，因此瀏覽器會不能夠辨識兩次的請求是否來自同一個使用者，這時候cookie提供了方式，使Server能夠辨識並保存其狀態，例如登入狀態。
Server端的存取： Cookie 可以由Server端設定並讀取，所以它們適合存儲需要由Server端處理的資訊，例如 Token 或 session 識別碼。

也因為Cookie是透過HTTP的Headers來傳送，因此每發送一個請求出去，就會佔用流量，所以現在也提供了 web storage APIs(SessionStorage、LocalStorage)的方式。(MDN)

特點：

• 容量限制為4k
• 資料存取範圍預設是關閉瀏覽器之後失效
• 可以透過Expires設定資料失效時間、或 Max-Age設定有效時間長度
• 每次請求都會被夾帶在HTTP的Headers中，使用過多會帶來性能上的問題
• 可以與Server互動

SessionStorage、LocalStorage

SessionStorage、LocalStorage 這兩者的性質非常相似，它們的使用方式是提供key/value的方式儲存資料，並且可以使用相似的API方法getItem()/setItem()/removeItem()。
唯一的差別是LocalStorage的資料沒有時效的限制(除非自行刪除)、SessionStorage只要是開啟新分頁或視窗就會產生一個新的sessionStorage(即使兩個分頁都是開啟同一個網站也是)。

sessionStorage使用方法

// 將資料存到sessionStorage
sessionStorage.setItem("key", "value");

// 從sessionStorage取得之前存的資料
var data = sessionStorage.getItem("key");

// 從sessionStorage移除之前存的資料
sessionStorage.removeItem("key");

// 從sessionStorage移除之前存的所有資料
sessionStorage.clear();

localStorage使用方法

// 將資料存到localStorage
localStorage.setItem("key", "value");

// 從localStorage取得之前存的資料
var data = localStorage.getItem("key");

// 從localStorage移除之前存的資料
localStorage.removeItem("key");

// 從localStorage移除之前存的所有資料
localStorage.clear();

SessionStorage 適合使用的情境

SessionStorage 適合用來做表單資料的保存
假設使用者要填註冊流程表單或是問卷，只有在填表單的單當下(停留在頁面)時要記住這些資訊，隨著表單送出或是分頁關閉時，這些資料將會是不需要的，因此適合使用SessionStorage的方式

LocalStorage 適合使用的情境

LocalStorage適合用在儲存購物車資訊或是個人化設定(例如：主題、使用者偏好設定)
許多網站可以讓使用者自定義他們的喜好瀏覽模式，例如選擇佈景主題、語言或其他界面設定，這些設定通常希望在使用者的多次訪問時保持不變。使用 localStorage 可以確保即使使用者關閉瀏覽器或電腦，或在幾天、幾週或幾個月後再次訪問網站，他們的偏好設定仍然會被記住。

LocalStorage 也提供了比較大的存儲容量，而且資料在瀏覽器中是持久的，代表著即使使用者關閉瀏覽器或電腦，購物車的內容仍然可以被保留。當使用者返回網站時，他們可以看到之前添加到購物車的商品。

上方的整理只是兩者的典型使用情境。選擇使用 sessionStorage 還是 localStorage 主要還是取決於希望資料在儲存上的需求～

特點：
共同特點

• 也有儲存容量的限制，但通常可以到5M或者更大
• 不會與Server進行互動

作用域不同

• SessionStorage 的資料僅會存在於當前的分頁(tab)或窗口(window)。當開啟一個新的分頁或窗口，即使是訪問同一個網站，它都會有一個獨立的 SessionStorage。換句話說，每個分頁或窗口都不會共享 SessionStorage 中的資料。
• LocalStorage 在同一個瀏覽器的所有分頁(tab)和窗口(window)之間共享，只要它們訪問的是同一個網站都可以共享。
  但不同的瀏覽器（例如 Chrome、Firefox、Edge）之間不會共享 LocalStorage。

用白話的一句話來總結這三者

Cookie: 是一小段資料，儲存使用者的瀏覽器中，網站用它來記住使用者的資訊和活動
SessionStorage: 是瀏覽器的臨時空間，用來儲存暫時性的資料，在分頁或窗口關閉時，資料將會被刪除
LocalStorage: 是瀏覽器的長期儲存空間，即使關閉瀏覽器，裡面的資料還會保留

Cookie怎麼避免跨站腳本攻擊(XSS)

Secure: 只有在使用加密請求HTTPS時才會傳給Server端，從 Chrome 52 以及 Firefox 52 開始，不安全的網站（http）就不能以 Secure 的指示設定 cookies。

HttpOnly: 通過HttpOnly可以確保資訊只能被Server端訪問，這樣就可以避免被Client端的JavaScriptDocument.cookie訪問到。

HttpOnly 和 Secure 解決了不同安全問題的兩種機制，Secure 確保 cookie 只在加密連接上傳輸，而 HttpOnly 確保 cookie 不被客戶端腳本訪問，這兩者很長一起使用來提供更高的安全性。

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly

參考文章：
Window.sessionStorage
HTTP cookies
Cookie、sessionStorage、localStorage的区别
Cookie/ LocalStorage/ SessionStorage 的差別