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

作者：袖梨 2026-07-04

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_* 相关键）。