Web Storage适用于轻量级离线数据模型，如用户偏好、表单草稿、登录态缓存和页面状态快照；需序列化存储、语义命名、精简字段、手动管理过期与容量，并监听storage事件同步；不适用于大数据、字段查询、强一致性或双向同步场景。

Web Storage（包括 localStorage 和 sessionStorage）适合构建轻量级、结构简单的离线数据模型，但它不是为复杂离线应用设计的数据库。在明确其边界的前提下，合理使用它仍能有效支撑部分离线场景。

适用的数据模型类型

• 用户偏好设置：如主题色、语言、字体大小等单值或简单对象
• 表单草稿：短文本输入、未提交的联系人信息、待办事项列表（条目数 ≤ 50）
• 登录态缓存：JWT token、refresh token（需配合有效期校验逻辑）
• 页面状态快照：当前滚动位置、折叠/展开状态、筛选条件

数据建模关键建议

• 所有数据必须序列化为字符串
  使用 JSON.stringify() 存储，JSON.parse() 读取；避免直接存 Date、Function、undefined 或循环引用对象
• 每个 key 应具备语义清晰的命名，推荐前缀分类
  例如：user:theme、form:draft-contact-123、cache:product-list-timestamp
• 避免嵌套过深或冗余字段
  如存储用户资料时，只保留离线必需字段（name, email, avatarUrl），而非整份后端响应
• 主动管理容量与过期逻辑
  localStorage 无自动过期机制，需自行添加 expiresAt 字段并读取时校验
  示例：

  const item = { data: { name: "张三" }, expiresAt: Date.now() + 24 * 60 * 60 * 1000 };
  localStorage.setItem("user:profile", JSON.stringify(item));

操作规范与容错处理

• 写入前检测配额是否充足

  try {
    localStorage.setItem("key", "value");
  } catch (e) {
    if (e.name === "QuotaExceededError") {
      console.warn("localStorage 已满，考虑清理旧数据或降级策略");
    }
  }

• 删除失效数据宜采用“懒清理”+“定期扫描”结合
  不必每次写入都遍历清理，但可在应用启动或用户登出时执行一次过期项清除
• 跨标签页同步需监听 storage 事件

  window.addEventListener("storage", (e) => {
    if (e.key === "user:theme") {
      document.documentElement.setAttribute("data-theme", e.newValue);
    }
  });

不建议用 Web Storage 的场景

• 存储含图片 Base64、长日志、大量商品 SKU 数据
• 需要按字段查询（如“查所有 status 为 draft 的表单”）
• 多事务并发写入或强一致性要求（如库存扣减）
• 离线编辑后需与服务端双向同步的复杂业务

这类需求应转向 IndexedDB 或搭配 Service Worker + Workbox 实现更健壮的离线能力。