LocalStorage 本身不支持命名空间，但可通过模块前缀（如 user:profile）模拟命名空间，避免冲突并便于管理；封装 NamespaceStorage 类可自动处理前缀拼接、存取与批量清除；需规范命名、避免敏感信息存储，并注意容量限制。
LocalStorage 本身不支持命名空间，但可以通过在键名（key）中加入模块前缀来模拟按模块划分的命名空间，这是最常用、最轻量且兼容性最好的方式。
用模块前缀构造 key 名
核心思路是：所有属于某个模块的数据，统一使用 模块名 + 冒号 + 具体标识 的格式作为 key。例如：
- user:profile → 用户模块的个人资料
- cart:items → 购物车模块的商品列表
- theme:current → 主题模块的当前设置
这样既避免 key 冲突，又便于人工识别和批量操作（比如清除某模块全部数据）。
封装一个带命名空间的工具类
为减少重复拼接，可封装一个简单工具类，自动添加前缀：
立即学习“Java免费学习笔记（深入）”；
class NamespaceStorage {
constructor(namespace) {
this.namespace = namespace;
}
key(name) {
return `${this.namespace}:${name}`;
}
set(name, value) {
const key = this.key(name);
const str = typeof value === 'string' ? value : JSON.stringify(value);
localStorage.setItem(key, str);
}
get(name, defaultValue = null) {
const key = this.key(name);
const str = localStorage.getItem(key);
if (str === null) return defaultValue;
try {
return JSON.parse(str);
} catch {
return str; // 非 JSON 字符串原样返回
}
}
remove(name) {
localStorage.removeItem(this.key(name));
}
clear() {
Object.keys(localStorage)
.filter(key => key.startsWith(`${this.namespace}:`))
.forEach(key => localStorage.removeItem(key));
}
}使用示例：
- const userStore = new NamespaceStorage('user');
- userStore.set('profile', { name: 'Alice' });
- userStore.get('profile'); // { name: 'Alice' }
- userStore.clear(); // 只清空 user:* 开头的所有项
批量管理与调试技巧
开发时可通过控制台快速查看或清理某模块数据：
- 查所有 user 模块数据：Object.entries(localStorage).filter(([k]) => k.startsWith('user:'))
- 清空 cart 模块：Object.keys(localStorage).filter(k => k.startsWith('cart:')).forEach(k => localStorage.removeItem(k))
建议在项目初期就约定好模块命名规范（如全小写、用短横线分隔），避免后期混乱。
注意事项
LocalStorage 是全局共享的，没有真正的隔离机制。因此：
- 避免不同模块使用相同前缀（如都用 auth），推荐加项目标识，如 myapp-auth:token
- 不要存敏感信息（如密码、token），尤其在多用户共享设备场景
- 注意存储大小限制（通常 5–10MB），大模块数据建议压缩或换用 IndexedDB
不复杂但容易忽略细节，坚持统一前缀 + 封装访问逻辑，就能高效支撑多模块本地缓存需求。
