Cookie

HTTP cookie 簡稱為Cookie，當使用者瀏覽網頁時，web server會建立cookie，並將資料儲存在瀏覽器。

過去時常用於儲存購物車的資料，或者是紀錄使用者的網頁活動(點擊按鈕、登入、追蹤瀏覽的頁面等)。

Cookies are used to personalize a user’s web experience with a website. It may contain the user’s preferences or inputs when accessing that website. A user can customize their web browser to accept, reject, or delete cookies.

Cookie的類型分為許多種(詳細可以參閱HTTP cookie - Wikipedia):

• Session cookie: 被儲存在瀏覽器的資料僅供暫時儲存，當瀏覽器關閉時就被清空。
• Persistent cookie: 被存在硬碟的並永久儲存，手動刪除時清空。

而常見的還有，身分驗證cookie( Authentication cookies)被用於確認使用者的登入狀態，或是追蹤cookie(Tracking cookies)會追蹤使用者的活動(也就是我們在瀏覽某些網頁時，會跳出的"第三方追蹤cookie"，因為有隱私性問題，所以會詢問使用者是否允許。)

性質

• 分為暫時儲存或永久儲存，可設定資料失效的時間。
• 請求時會被遞交給server。
• 容量約 4kb。

每當進行HTTP請求，Cookie就會被夾帶在Header一起被遞交(明文傳輸)，因此會被占據流量，也較容易有安全性的問題。(網路攻擊可以參閱這篇文章: 身為 Web 工程師，你一定要知道的幾個 Web 資訊安全議題)

由於Cookie容量小、佔網路流量、資料安全性低的缺陷，後來Web Storage API 提供了其他可以應用的儲存方式。

SessionStorage

Web Storage API 使提供了兩種儲存方式: SessionStorage & LocalStorage，瀏覽器能夠以key/value字組來儲存資料。

The Web Storage API provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using cookies.

性質

• 資料僅供暫時儲存，每瀏覽器或分頁關閉時就被清空。
• 資料不會被遞交給server。
• 容量至多5MB(大於cookie)。

SessionStorage可用於較長的表單輸入，將表單拆成子頁，並在填完表單後一併送出，以提升用戶體驗。

LocalStorage

LocalStorage與SessionStorage類似，差別是LocalStorage容量較大，且被儲存在LocalStorage除非主動刪除資料，不然會永久存在。

性質

• 資料僅供暫時儲存，每瀏覽器或分頁關閉時就被清空。
• 資料不會被遞交給server。
• 容量至多5MB(SessionStorage)。

在用途上，LocalStorage替代了Cookie儲存購物車資訊的工作。

比較

\ | 儲存時間 | 容量大小
-----|-----|
Cookie | 預設關閉瀏覽器失效；也可永久儲存 | 4kb 最小
SessionStorage | 關閉分頁或瀏覽器失效 | 中
LocalStorage | 永久儲存，需手動刪除 | 最大(最多5mb)

【如內文有誤還請不吝指教>< 並感謝閱覽至此的各位:D 】

參考資料

• Cookie - 維基百科，自由的百科全書
• [JavaScript] Cookie、LocalStorage、SessionStorage 差異 | by Peggy Chan | Medium
• Document.cookie - Web APIs | MDN
• Web Storage API - Web APIs | MDN

---正文結束---