Web Storage本地存储结构设计：键值对映射方案

Web Storage 应遵循键有语义、值可序列化、层级克制、命名统一原则：键用“模块_实体_用途”格式并共享前缀；值须字符串化，对象需JSON序列化与反序列化；避免嵌套，应扁平化分键存储；建议封装工具函数支持前缀、容错及批量操作。

Web Storage 的键值对结构本身很简单，但设计得当能显著提升可维护性和扩展性。核心原则是：键要有语义、值要可序列化、层级要克制、命名要统一。

键名设计：用前缀+业务标识+功能维度

避免随意命名如 "data" 或 "temp"，容易冲突且无法溯源。推荐格式：模块_实体_用途，例如：

• user_profile_info（用户个人资料）
• cart_items_list（购物车商品列表）
• theme_preference_dark（深色主题偏好）
• form_draft_order_20260613（订单表单草稿，含日期防覆盖）

同一业务域的键建议共享前缀，便于调试时在 DevTools 的 Application → Storage 面板中快速筛选。

值的存储：字符串为唯一载体，对象必须 JSON 序列化

localStorage 和 sessionStorage 只接受字符串作为 value。直接赋值非字符串类型（如数字、布尔、对象）会隐式调用 .toString()，导致数据丢失或误判：

• localStorage.setItem('count', 42) → 实际存的是 "42"
• localStorage.setItem('isActive', true) → 存的是 "true"，不是布尔值
• 对象必须显式处理：localStorage.setItem('user', JSON.stringify({name: 'Alice', id: 101}))
• 读取时务必反序列化：JSON.parse(localStorage.getItem('user'))，并加 try-catch 防止损坏数据

避免嵌套过深，优先扁平化存储

不要把多个逻辑相关的数据塞进一个键里拼成大对象，比如：

❌ 不推荐：localStorage.setItem('app_state', JSON.stringify({ user: {}, cart: {}, settings: {} }))

问题：单点更新需全量读写，易引发竞态；一处解析失败整块失效；调试困难。

✅ 推荐：
localStorage.setItem('user_data', JSON.stringify(user))
localStorage.setItem('cart_items', JSON.stringify(items))
localStorage.setItem('settings_theme', '"dark"')

这样每个键职责单一，更新互不影响，也方便按需清除（如登出时只删 user_* 相关键）。

配套管理：封装基础操作 + 命名空间隔离

实际项目中建议封装一层工具函数，自动处理前缀、序列化、错误兜底：

• 写入：storage.set('profile', {nick: 'Leo', avatar: '/a.png'}) → 自动加前缀、JSON 化
• 读取：storage.get('profile') → 自动 JSON.parse，失败返回 null
• 清除：storage.clearByPrefix('user_') → 批量删用户相关项
• 支持传入自定义命名空间（如 'v2_'），方便版本迁移时平滑过渡

不复杂但容易忽略