localStorage适合缓存非敏感用户信息，需用JSON.stringify序列化后带前缀保存，读取时用try...catch配合JSON.parse安全解析，更新或登出时及时清理，注意5MB容量限制、无过期机制及同源策略约束。

localStorage 是浏览器提供的持久化存储机制，适合缓存用户登录态、偏好设置等非敏感信息。它以字符串键值对形式保存数据，页面关闭后依然存在，且读取速度快、操作简单。

保存用户信息到 localStorage

用户登录成功后，可将必要字段（如 id、token、nickname）序列化为 JSON 字符串存入 localStorage。注意避免直接存整个用户对象（可能含函数或循环引用），也别存密码、私钥等敏感内容。

• 使用 JSON.stringify() 转换对象再保存
• 推荐用统一前缀（如 "user:"）避免键名冲突
• 示例：localStorage.setItem("user:profile", JSON.stringify({id: 123, nickname: "小明", token: "abc123"}))

从 localStorage 安全读取用户信息

读取时需先检查键是否存在，并用 JSON.parse() 还原对象。若解析失败（比如数据被手动篡改或损坏），应捕获异常并返回默认值或清空无效数据。

• 始终用 try...catch 包裹 JSON.parse
• 建议封装一个安全读取函数，自动处理 null 或 malformed 数据
• 示例：const user = JSON.parse(localStorage.getItem("user:profile") || "{}")

更新与清除用户缓存

用户修改资料或登出时，需同步更新或删除 localStorage 中的数据。登出务必调用 removeItem 或 clear()，防止旧 token 被误用。

• 更新：重新 setItem 即可覆盖旧值
• 登出时建议只删相关键（如 removeItem("user:profile")），而非清空全部
• 调试时可在控制台用 localStorage.key(n) 或 Object.keys(localStorage) 查看当前缓存

注意事项与边界情况

localStorage 容量约 5MB（因浏览器而异），不支持过期时间，也不跨域共享。它不是替代服务端鉴权的方案，仅用于提升体验。

• 隐私模式下 localStorage 可能被禁用，需做好降级（如 fallback 到内存变量）
• 同源策略限制：http 和 https、www 和非 www 视为不同源，数据不互通
• 避免在 Vue/React 组件挂载时直接读取——确保 DOM 和 JS 环境就绪