localStorage适合存登录标识和偏好设置，但不可存token或密码；需用JSON序列化、容错读取、早期应用、跨页同步及隐私模式降级。
网页应用可以用 localStorage 记住用户是否登录、用什么主题、字体多大、语言选了哪个——但不能直接存 token 或密码，也不能指望它在所有隐私模式下都可用。关键不是“能不能存”，而是“怎么存得稳、读得准、用得顺”。
存登录状态：只记“已登录”，不存敏感凭证
localStorage 适合保存一个轻量的登录标识，比如 是否已认证 和 基础用户信息（如昵称、头像 URL），但绝不直接存 access_token、refresh_token 或密码明文。
- 登录成功后，写入：
localStorage.setItem('auth', JSON.stringify({ isLoggedIn: true, nickname: 'Alex', avatar: '/img/alex.jpg' })) - 每次页面加载时读取并校验：
先 try-catch 解析，再检查isLoggedIn === true；若解析失败或为 false，则视为未登录，清空缓存并跳转登录页 - 退出登录时，统一调用：
localStorage.removeItem('auth')，避免残留无效状态
存偏好设置：打包对象 + 统一 key + 早期应用
把所有用户界面偏好（主题、字体、语言、侧边栏开关等）合并成一个对象，用固定 key 存储，比零散设十几个 key 更易维护、升级和降级。
- 推荐写法：
localStorage.setItem('userPrefs', JSON.stringify({ theme: 'dark', fontSize: 16, lang: 'zh-CN', sidebarCollapsed: false })) - 读取必须加容错：
const prefs = JSON.parse(localStorage.getItem('userPrefs') || '{}');
没数据就用默认值，不强行写入空对象 - 应用时机要早：在
内或 DOMContentLoaded 阶段执行，给document.documentElement设 CSS 变量或 class，防止 FOUC（闪白屏）
跨标签页同步：靠 storage 事件，但当前页要手动更新
storage 事件只在其他同源页面修改 localStorage 后触发，不会通知自己。所以用户在一个标签页切了深色模式，另一个标签页能自动响应，但当前页必须自己改 UI。
- 每次 setItem 后，立刻调用 UI 更新函数（例如切换 body class、重设 font-size）
- 监听跨页变更：
window.addEventListener('storage', e => { if (e.key === 'userPrefs') applyPrefs(JSON.parse(e.newValue || '{}')); }); - 注意：Safari 无痕模式、部分国产浏览器可能禁用 localStorage，需包裹 try-catch，降级为内存变量暂存
安全与健壮性：避开常见雷区
看似简单的 API，几个细节没处理好就会导致白屏、报错或数据丢失。
- 不存敏感数据：token、银行卡号、身份证号等一律走 httpOnly Cookie 或后端 session
- 不依赖强一致性：库存、订单状态这类实时性要求高的数据，必须以服务端为准，localStorage 只作临时缓存或草稿
- 防范容量超限：单个 key 不宜超过 1MB；定期清理过期项（如加时间戳字段），或用 LRU 策略管理 key 列表
-
注意隐私模式限制：首次进入前可快速探测：
try { localStorage.setItem('test', 'x'); localStorage.removeItem('test'); } catch { /* 启用内存 fallback */ }
