iT邦幫忙

2021 iThome 鐵人賽

DAY 20
0
自我挑戰組

登堂入室!前端工程師的觀念技術 _30_ 題系列 第 20

19. Cookie/ LocalStorage/ SessionStorage 的差別

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 】

參考資料

---正文結束---


上一篇
18. 解釋 JSONP 如何運作
下一篇
20. React Hooks 想改善的問題 ( + 簡單實作 useState)
系列文
登堂入室!前端工程師的觀念技術 _30_ 題31

尚未有邦友留言

立即登入留言