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_'），方便版本迁移时平滑过渡
不复杂但容易忽略
