Vuex vs localStorage vs sessionStorage 比較

原理

使用「Client 端（瀏覽器）」的記憶體

項目 Vuex localStorage sessionStorage
🔸儲存位置 使用者裝置的記憶體（RAM） 使用者裝置的磁碟（browser 存放區） 使用者裝置的記憶體（RAM）
🔸生命週期 頁面刷新會清除（除非結合 plugins 保存） 永久保存，除非被明確移除 當前頁籤有效，關閉該 tab 就會清除
🔸儲存型別 可儲存任何資料型別（Object, Array 等） 僅能儲存字串（需用 JSON.stringify/parse） 僅能儲存字串（需用 JSON.stringify/parse）
🔸存取方式 透過 Vuex 提供的 state, getters, actions, mutations 使用 localStorage.setItem / getItem 使用 sessionStorage.setItem / getItem
🔸作用範圍 全站所有元件皆可共用 全站有效，跨頁有效 只在該頁籤內有效，不能跨分頁
🔸是否具備 reactive（響應式） ✅ 是（與 Vue 整合） ❌ 否，需要手動監控更新 ❌ 否，需要手動監控更新
🔸資料大小限制 受瀏覽器記憶體限制，一般夠用 約 5~10 MB（依瀏覽器而異） 約 5~10 MB（依瀏覽器而異）
🔸是否支援 SSR 使用 ❌ 不支援 SSR，僅限 client side ✅ 可在 mounted 後使用（僅限 client） ✅ 可在 mounted 後使用（僅限 client）
🔸安全性與隱私性 通常配合記憶體操作，較安全 資料可被 JS 調用，不建議儲存敏感資料 資料可被 JS 調用，不建議儲存敏感資料

使用者瀏覽器記憶體 vs 主機記憶體

比較項目 🖥️ 主機記憶體（Server-side memory） 🧑‍💻 使用者瀏覽器記憶體（Client-side memory）
📍 位置 Server RAM，如 Redis、Memcached 使用者瀏覽器，如 Vuex、localStorage
📡 資料存取延遲 較快，但需經網路傳輸 幾乎即時
📦 資料容量限制 記憶體大（GB 級），但需控管清除 限制小（約 5~10MB 或依 RAM）
🔒 資料安全性 可設定權限與加密控制 容易被瀏覽器 JS 檢視與竄改
🔁 多用戶共用性 ✅ 可共用資料（如 Redis 快取） ❌ 僅限單一使用者資料
💾 可持久性 須配合資料庫，否則記憶體易清空 localStorage 可持久，其他較短暫
🛠️ 建置複雜度 高，需設定快取與控管機制 低，前端內建
⏱️ 壓力與負載 Server 負擔大，需擴充應對高流量 減輕 Server 壓力
🧩 相依性與彈性 依賴後端架構與 API 完全由前端控制，彈性高
💣 潛在風險 Server 記憶體耗盡導致效能問題 Client 效能下降、崩潰風險

使用者瀏覽器記憶體（Client-side）

優點

  • 🚀 快速回應，不需頻繁請求 Server
  • 🧮 前端可快取與分擔狀態儲存
  • 🌐 降低 Server 壓力
  • 🧰 開發彈性高

缺點

  • ❗ 安全性差，不適合儲存敏感資訊
  • 💾 容量有限（通常為 5~10MB）
  • 🔄 多頁籤/裝置無法同步

主機記憶體（Server-side）

優點

  • 🔒 安全性高，可設定權限與加密
  • 🔄 資料一致性高，適合共用資料
  • ⚙️ 搭配資料庫快取效果佳

缺點

  • ⚠️ 管理成本高，需監控與錯誤處理
  • 🧱 Server 成為效能瓶頸可能性高
  • 🧵 跨節點需考慮分散式快取（Redis Cluster）

怎麼選擇？

使用場景 建議使用方式
登入狀態、購物車、語言設定等前端狀態 Vuex + localStorage（或 vuex-persist）
快速重複存取的共用熱門資料 Redis/Memcached 快取
高安全需求資料（如 Token） HttpOnly Cookie 或 Server Session
資料需跨裝置同步 Server-side 儲存較佳

分工原則與結論

分工原則 說明
💻 Client（前端）快取 UI 狀態、暫存資料、個人化設定、不需共享
🧠 Server（後端）快取 商業邏輯、共享狀態、安全性驗證、跨裝置同步

前端快取常用於：

  • 個人操作資料、使用者狀態（Vuex, localStorage）
  • 快速反應需求（SPA, PWA）
  • 降低 Server 壓力與延遲

後端快取不可取代的場景：

場景 無法改用前端快取的原因
驗證碼 / Token / 登入狀態管理 涉及安全與時效性，需後端控管
多用戶共享資料 前端為私有，無法共用
頻繁查詢報表資料 前端難以負荷大量資料與計算
多伺服器協作需求 僅能由 Redis 等工具處理跨節點同步

情境範例：登入流程與 Token 管理建議

登入流程基本流程：

  1. 檢查是否有 token（localStorage/Vuex/sessionStorage）
  2. 若有 → 向 API 請求使用者資訊；無則導向登入頁
  3. Server 驗證 token（是否過期、可否刷新）
  4. 若過期但可刷新 → 回傳新 token；否則重新登入

安全建議

  • Access Token 儲存於 Vuex 或 HttpOnly Cookie
  • Refresh Token 儲存於 HttpOnly Cookie + Secure，防止 XSS

Token 自動續期建議：

  • 利用 axios interceptor 判斷 Access Token 是否快過期
  • 若即將過期（例如剩 60 秒）→ 自動觸發 Refresh Token 換新流程

Refresh Token 安全性建議：

  • 使用後立即註銷並簽發新 Refresh Token（token rotation）
  • 可透過 Redis 控制 Token 是否已使用

Token 使用壽命建議：

類型 儲存方式 建議有效期
Access Token Vuex / Cookie 5~15 分鐘
Refresh Token HttpOnly Cookie + Secure 7~30 天

Token 驗證失敗處理：

  • 清除瀏覽器端快取資料（Vuex/localStorage）
  • 導向登入頁面，提示登入過期
  • 若使用 Cookie 傳送 Access/Refresh Token，須額外實作 CSRF Token 機制