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):
而常見的還有,身分驗證cookie( Authentication cookies)被用於確認使用者的登入狀態,或是追蹤cookie(Tracking cookies)會追蹤使用者的活動(也就是我們在瀏覽某些網頁時,會跳出的"第三方追蹤cookie",因為有隱私性問題,所以會詢問使用者是否允許。)
性質
每當進行HTTP請求,Cookie就會被夾帶在Header一起被遞交(明文傳輸),因此會被占據流量,也較容易有安全性的問題。(網路攻擊可以參閱這篇文章: 身為 Web 工程師,你一定要知道的幾個 Web 資訊安全議題)
由於Cookie容量小、佔網路流量、資料安全性低的缺陷,後來Web Storage API 提供了其他可以應用的儲存方式。
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.
性質
SessionStorage可用於較長的表單輸入,將表單拆成子頁,並在填完表單後一併送出,以提升用戶體驗。
LocalStorage與SessionStorage類似,差別是LocalStorage容量較大,且被儲存在LocalStorage除非主動刪除資料,不然會永久存在。
性質
在用途上,LocalStorage替代了Cookie儲存購物車資訊的工作。
\ | 儲存時間 | 容量大小
-----|-----|
Cookie | 預設關閉瀏覽器失效;也可永久儲存 | 4kb 最小
SessionStorage | 關閉分頁或瀏覽器失效 | 中
LocalStorage | 永久儲存,需手動刪除 | 最大(最多5mb)
【如內文有誤還請不吝指教>< 並感謝閱覽至此的各位:D 】
參考資料
---正文結束---
文章內圖:
這邊的文字是不是打錯了呢? LocalStorage 應該是如你上方所述
LocalStorage除非主動刪除資料,不然會永久存在。