Web Storage本地存储键值对结构设计

Web Storage 的键值对结构本身非常简洁，但实际开发中稍不注意就容易踩坑，或让代码变得难以维护。核心原则其实只有四条：键要有语义、值要可序列化、层级要克制、命名要统一。把这几点吃透，开发体验会提升很多。

键名设计：别再用“data”或“temp”了

很多人习惯随手写一个 "data" 或 "temp" 作为键名，但这种做法的弊端很明显：项目变大后，这些键名极易冲突，追溯来源也很困难。更推荐一种格式：模块_实体_用途。来看几个例子：

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

同一业务域下的键，尽量共享相同的前缀。这样做的好处是，在 Chrome 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"')

每个键只负责一个职责，彼此互不干扰。需要更新购物车时，只动 cart_items 这一个键。登出时，也可以很方便地批量删除所有 user_* 相关键，干净利落。

配套管理：封装工具函数 + 命名空间隔离

从工程化角度看，建议封装一层工具函数，自动处理前缀、序列化和错误兜底。这样能让代码更健壮，也更容易维护：

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

这些技巧并不复杂，但往往容易被忽略。把握好这些细节，Web Storage 用起来会顺手很多。