核心思路是用版本号控制 localStorage 缓存失效：启动时比对 app-version 与当前版本，不一致则清空旧缓存并写入新版本号；缓存 key 按 prefix-version-key 格式隔离存储，封装 VersionedStorage 类统一管理读写、清理与版本校验，并注意容量限制、安全性及降级处理。
用 localStorage 配合版本号做本地缓存，核心思路是：每次更新代码或数据结构时升级版本号，旧版本缓存自动失效并重建。这样既保留了缓存的性能优势，又避免了因格式变更导致的读取错误或逻辑异常。
版本号怎么存和比对
把当前应用的版本号（比如 "v1.2.0"）作为固定 key 存进 localStorage，例如 "app-version"。每次启动时先读这个值，和当前代码里声明的版本号对比：
- 相同 → 直接使用已有缓存数据
- 不同或不存在 → 清空所有业务相关缓存项，并写入新版本号
缓存数据按版本隔离存储
不要直接覆盖旧缓存，而是把关键数据按版本命名存储，比如 "user-data-v1.2.0"。这样调试时能保留多版本数据，也方便灰度验证。实际项目中常用方式是：
- 用统一前缀 + 版本号拼接 key，如
`cache-${version}-${type}` - 只清理明确属于旧版本的 key，避免误删其他模块缓存
- 升级后首次加载可异步迁移旧数据（如果结构兼容），否则直接丢弃
封装一个带版本管理的缓存工具
写个简单工具类，把版本检查、读写、清理逻辑收拢起来，减少重复代码。例如：
立即学习“Java免费学习笔记（深入）”；
class VersionedStorage {
constructor(version, prefix = 'myapp') {
this.version = version;
this.prefix = prefix;
this.versionKey = `${prefix}-version`;
this.ensureVersion();
}
ensureVersion() {
const saved = localStorage.getItem(this.versionKey);
if (saved !== this.version) {
this.clearAll();
localStorage.setItem(this.versionKey, this.version);
}
}
set(key, value) {
localStorage.setItem(`${this.prefix}-${this.version}-${key}`, JSON.stringify(value));
}
get(key) {
const item = localStorage.getItem(`${this.prefix}-${this.version}-${key}`);
return item ? JSON.parse(item) : null;
}
clearAll() {
Object.keys(localStorage)
.filter(k => k.startsWith(`${this.prefix}-v`))
.forEach(k => localStorage.removeItem(k));
}
}
使用时只需 const cache = new VersionedStorage('v1.3.0');，后续调用 cache.set('user', {...}) 就自动带版本前缀。
注意边界情况和兼容性
localStorage 容量有限（通常 5MB），且只支持字符串。实际使用要留心：
- 大对象建议先压缩或分片，避免
QUOTA_EXCEEDED_ERR - 敏感信息别存，localStorage 不安全
- 跨域或无痕模式下可能被禁用，需加 try/catch 并降级处理（如改用内存缓存）
- 版本号建议从 package.json 自动注入，避免手动维护出错
