用途:帮助开发者在客户端持久化数据时,选择正确的浏览器存储机制,避免安全、体验与正确性问题。
主要能力:对比 cookie、localStorage、sessionStorage、IndexedDB 的作用域、是否随请求发送到服务器、持久性。给出决策映射:服务器每次请求都需要该值用 cookie;非敏感浏览器偏好用 localStorage;标签页关闭即消失用 sessionStorage;数据大、结构化或离线优先用 IndexedDB。
使用方式:cookie 适合会话 ID、HttpOnly 中的刷新/会话令牌、服务端渲染需要的语言偏好、服务端需读取的 A/B 标记;关键属性有 HttpOnly、Secure、SameSite、Max-Age/Expires、Path/Domain。localStorage 适合主题、已关闭横幅、最近使用的 UI 设置,示例:localStorage.setItem('theme', 'dark')。sessionStorage 适合结账步骤、未保存表单草稿、临时重定向状态,示例:sessionStorage.setItem('draft-id', draftId)。IndexedDB 适合大量结构化或离线数据。
常见模式:UI 偏好存 localStorage;会话认证用安全 cookie;标签页内草稿用 sessionStorage;仅客户端关闭状态用 localStorage;生产常用混合模型:认证会话放 HttpOnly cookie,UI 偏好放 localStorage,流程临时状态放 sessionStorage。
限制与注意:浏览器存储 API 在服务端渲染时不存在,需用 typeof window !== 'undefined' 守卫;localStorage 不过期,需自行加时间戳;存储只存字符串,JSON 解析要防无效数据与模式变更;可能遇到存储禁用、隐私模式限制、配额超限、解析错误,应封装安全读写并回退内存默认值。localStorage 同源跨标签页共享,需标签隔离时用 sessionStorage。敏感令牌不应默认放 localStorage,客户端可读存储都应视为可能被 XSS 读取。反模式包括:默认把认证密钥放 localStorage、用 cookie 存大量纯客户端状态、用 localStorage 做标签页级流程、SSR 中无守卫读取存储、复杂数据无版本管理。
适用场景:前端状态持久化、认证会话、表单草稿、UI 偏好、离线数据等决策。具体实现细节与更多示例暂未提供。