你如何持久化和激活状态？

Question

你如何持久化和激活状态？

Accepted Answer

**持久化** state 意味着将其保存到存储（localStorage、IndexedDB、后端）以便在页面重新加载或会话后保留；**激活** 意味着在启动时将其加载回应用。这对购物车、auth tokens、用户偏好和草稿表单很常见。

## 使用 localStorage 的基本持久化 + 激活

```jsx
function useCart() {
  // HYDRATE: initialize from storage (lazy initializer runs once)
  const [cart, setCart] = useState(() => {
    try {
      const saved = localStorage.getItem("cart");
      return saved ? JSON.parse(saved) : [];      // parse stored JSON
    } catch {
      return [];                                   // guard against corrupt data
    }
  });

// PERSIST: write to storage whenever it changes
  useEffect(() => {
    localStorage.setItem("cart", JSON.stringify(cart));
  }, [cart]);

return [cart, setCart];
}
```

两个部分：在初始化时读取和解析（激活），在更改时序列化和写入（持久化）。

## 库支持

```js
// Zustand persist middleware — automatic persist + hydrate
const useStore = create(persist((set) => ({ ... }), { name: "app-store" }));

// redux-persist for Redux; both handle serialization + rehydration
```

## 选择存储

```text
localStorage  → simple, synchronous, ~5–10MB, strings only (JSON) — preferences, small state
sessionStorage→ like localStorage but cleared when the tab closes
IndexedDB     → large/structured data, async — offline apps, big caches
Cookies       → sent to server; for auth (httpOnly for security)
Backend       → cross-device sync, source of truth for important data
```

## 重要的注意事项

```text
⚠️ SSR mismatch: localStorage doesn't exist on the server → guard with typeof window,
   and beware hydration mismatches between server-rendered and client state.
⚠️ Versioning/migration: stored shape may differ from new code → version it and migrate.
⚠️ Don't persist sensitive data (tokens) in localStorage (XSS-readable) — prefer httpOnly cookies.
⚠️ Don't persist server state you can refetch (let React Query handle caching).
⚠️ Validate/guard on hydrate — stored data can be stale or corrupt.
```

## 为什么这很重要

持久化提供真实的 UX 价值——购物车在重新加载后保留、偏好和草稿不会丢失、用户保持登录状态。

但朴素的实现会引入微妙而严重的问题：SSR 激活不匹配、陈旧/损坏的数据、schema 迁移破坏和 **安全风险**（在 XSS 可读存储中持久化 tokens）。

了解持久化/激活模式、为数据选择正确的存储以及遵守注意事项（为 SSR 设置 guard、对 schema 进行版本控制、不安全地存储 secrets、不持久化可重新获取的服务器状态）才是使持久化健壮的而不是难以诊断 bug 的来源。