localstorage适合存储不常变化、非敏感、需快速读取的数据，如用户偏好设置、静态配置、表单草稿和登录token（需配合httponly cookie），但需注意字符串序列化、5mb容量限制、同步阻塞及手动过期管理。
localStorage 能直接把数据存到用户本地浏览器里，页面刷新甚至关机重启后还在，所以它特别适合存那些不常变、又需要快速读取的数据，比如用户设置、配置项、静态列表或上一次的计算结果。用好了，能明显减少请求次数，让页面“秒开”。
哪些数据适合放进 localStorage
不是所有数据都该缓存，关键看三点：是否频繁读取、是否变动少、是否不敏感。
- 用户主题色、字体大小、语言偏好——改得少，读得多，存起来下次直接用
- 菜单结构、地区列表、常见药品分类等静态配置——后台很少更新，前端加载时先查缓存，没命中再请求
- AI分析报告、表单草稿、搜索历史——用户生成的内容，保留下来避免重复操作
- 登录态 token（需配合 HttpOnly cookie 更安全）——简化自动登录逻辑，但注意时效性和退出清理
怎么存才不踩坑
localStorage 只认字符串，对象数组必须 JSON 序列化；容量上限约 5MB，存太大容易写失败；而且它是同步 API，大量读写可能卡主线程。
- 存对象前一定要 JSON.stringify()，读出来立刻 JSON.parse()，否则会得到字符串而非原始结构
- 给每条缓存加时间戳和过期时间，避免用着过时数据。比如健康报告缓存 24 小时，超时就删掉重拉
- 键名统一加前缀，比如
aihealth_user_theme，避免不同模块冲突或误删 - 大文件（如图片 base64、长文本）慎存，超过 100KB 建议用 IndexedDB 或服务端下发
缓存读取流程怎么设计更合理
不能“有缓存就无脑用”，得结合业务判断是否可用。典型流程是：先读缓存 → 检查是否过期 → 过期或不存在则发请求 → 请求成功后立即写入新缓存。
- 首屏关键数据（如导航栏菜单）可设“兜底策略”：缓存存在就渲染，同时悄悄拉新数据，更新缓存并刷新视图
- 非关键数据（如用户最近浏览记录）允许缓存稍旧，提升响应速度，不用强等接口返回
- 涉及权限或实时性要求高的数据（如余额、未读消息数），跳过缓存，直连接口
- 网络异常时，优先展示缓存内容，并提示“当前为离线状态，数据可能不是最新”
别忘了清理和监控
没人管的缓存会越积越多，最后写不进新数据，还可能拖慢页面。
- 用户登出、切换账号时，主动清掉个人相关缓存，比如
removeItem('user_profile') - 版本升级时，可通过 key 前缀或版本号做迁移，比如旧缓存 key 是
v1_user_theme，新版本用v2_user_theme，老数据自动失效 - 上线后加一行简单监控：
console.warn('localStorage 使用率 >90%')，方便及时发现膨胀问题 - 开发阶段用浏览器开发者工具 Application → Storage → LocalStorage 查看实际内容，验证存取逻辑
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
