localStorage适合存非敏感用户状态和配置，如用户名、主题偏好等；敏感数据如token、密码严禁存储；需封装读写逻辑、控制存储规模、添加过期机制、键名加前缀隔离并避免全局清除。
localStorage 适合存用户状态和配置，但必须兼顾可用性、安全性和维护性。它不是万能缓存，用对了才真正省事。
只存非敏感数据
登录 token、密码、支付信息、身份证号等绝对不能放 localStorage。它可被任意同源脚本读取，XSS 攻击下极易泄露。实际项目中建议：
- 仅保存用户名、头像 URL、主题偏好（如 darkMode: true）、语言选择、默认排序字段等低风险信息
- Token 类凭证统一走 HttpOnly Cookie + 后端校验，前端只通过 API 交互，不直接读写 token 值
- 若必须缓存部分用户元数据（如 nickname、role），确保不含权限标识或可推导出敏感行为的数据
封装读写逻辑，避免裸调 API
直接调用 localStorage.setItem 容易出错：类型丢失、JSON 序列化失败、未处理异常、忽略容量限制。推荐封装一层工具函数或 Hook：
- 自动序列化/反序列化对象，不依赖使用者手动
JSON.stringify - 写入前检查是否支持 localStorage，捕获
QuotaExceededError并降级（如仅内存暂存） - 读取时提供默认值，避免
null或undefined导致渲染异常 - React 场景下优先使用类似 Dub.co 的
useLocalStorageHook，实现状态自动同步
控制存储规模，定期清理过期项
5MB 看似充裕，但大量缓存搜索结果、日志、未压缩的富文本内容会快速耗尽空间。真实项目中应：
- 单条数据超过 100KB 时考虑替代方案（IndexedDB、Service Worker 缓存）
- 为每类数据添加时间戳字段，例如
{ value: ..., expiresAt: Date.now() + 7 * 24 * 60 * 60 * 1000 } - 在应用启动或关键操作前，扫描并移除过期项；也可设置“最大条目数”，超出后按 LRU 清理
- 加入用量监控：计算
encodeURIComponent(JSON.stringify(localStorage)).length，超 90% 容量时触发告警或提示
配合同源策略与版本管理
localStorage 按协议+域名+端口划分作用域，但同一域名下多个子应用或迭代版本容易互相污染。建议：
- 键名加前缀隔离，如
dub-prod-ui-theme、app-v2.3.0-user-config - 大版本升级时主动清空旧键，或设计迁移逻辑（如读取旧 key → 转换格式 → 写入新 key → 删除旧 key）
- 开发环境与生产环境使用不同前缀，避免本地调试污染线上配置
- 避免用
localStorage.clear()全局清除，除非明确需重置全部用户状态
