انتقل إلى المحتوى الرئيسي

📄 請解釋 cookie, sessionStorage, localStorage 的差異

比對​

屬性cookiesessionStoragelocalStorage
生命週期除非有設定過期時間(Expires)，或是最大保存時間(Max-Age)，否則預設關閉頁面即刪除關閉頁面即刪除永久保存直到執行刪除
HTTP Request是，可以透過 Cookie header 帶給 Server 端否否
總容量4KB5MB5MB
存取(訪問)範圍跨視窗/分頁同一分頁跨視窗/分頁
安全性JavaScript 無法存取 HttpOnly cookies無無

名詞解釋​

什麼是(Persistent cookies)?

持久性 cookie 或稱永久性 cookie，是一種將資料長時間儲存在使用者瀏覽器上的做法，具體做法就是上題所提到，透過設定過期時間來達成(Expires or Max-Age)。

個人實作經驗​

1. 資安驗證​

某些舊專案的資安狀況不佳，頻發盜帳號的問題，這導致營運成本大幅提升。先選擇採用 Fingerprint 套件(社群版官方給出的說明是，準確度大約 60%，付費版的月免費額度 2 萬)，將每個登入的使用者透過裝置和地理位置參數，標識成獨立的 visitID，再利用 cookie 每次 http 請求都會帶上的特性，讓後端檢查該使用者目前的狀況，是否出現更換手機，或所在地的位置出現偏離，一但發現異常，就在登入流程下，強制觸發 OTP 驗證(視公司需求，可能是 email 或是簡訊)。

2. 推廣碼網址​

運營產品網站時，常會提供一些聯盟行銷的策略，提供專屬的網址給合作的推廣者，方便其進行導流與推廣。為了確保這些透過導流進入的客戶，屬於該推廣者的業績，我當時選擇採用 cookie 的 expires 特性來實作，讓使用者從導流進入網站起，24 小時內(限制時間可以由營運方決定)強制該推廣碼是有效的，即使使用者故意清除 url 上的推廣碼參數，註冊時仍會從 cookie 抓對應參數帶入，直到 24 小時後才會自動失效。

localStorage​

1. 儲存使用者偏好設定​

  • 常用於儲存使用者的個人偏好設定，例如 dark mode、i18n 語系等。
  • 或者儲存 login 的 token。