如何让NextJS+ShopifyBuy SDK应用的购物车数据持久化？

1. 检查Cart Context的初始化逻辑 #

你的context/cart.js是购物车状态管理的核心，首先要确保初始化时能读取本地存储的历史数据：

• 别直接把初始状态设为空数组，要先判断浏览器环境（NextJS是SSR，服务器端没有window对象），优先从localStorage取缓存：

  const initialCart = typeof window !== 'undefined' ? JSON.parse(localStorage.getItem('shopify-cart') || '[]') : [];
  const [cart, setCart] = useState(initialCart);
  

2. 购物车状态变化时同步到本地存储 #

每次添加/删除商品后，必须把最新的购物车数据存到localStorage或cookie里，用useEffect监听状态变化：

useEffect(() => {
  if (typeof window !== 'undefined') {
    // localStorage存储方式
    localStorage.setItem('shopify-cart', JSON.stringify(cart));
    // 用js-cookie的话要设置全局路径，避免不同页面读取不到
    // Cookies.set('shopify-cart', JSON.stringify(cart), { expires: 7, path: '/' });
  }
}, [cart]);

注意依赖数组里一定要加cart，不然状态变更时不会触发存储操作。

3. 同步ShopifyBuy SDK的购物车实例 #

如果用了SDK自带的购物车对象，只存本地数据不够，刷新后要把本地缓存同步回SDK购物车：

• 在Context初始化时，读取本地缓存后，把商品重新添加到SDK购物车：

  useEffect(() => {
    const initCart = async () => {
      const savedCart = JSON.parse(localStorage.getItem('shopify-cart') || '[]');
      if (savedCart.length > 0) {
        // 创建或获取SDK购物车实例
        const shopifyCart = await client.checkout.create();
        // 遍历缓存商品添加到SDK购物车
        for (const item of savedCart) {
          await client.checkout.addLineItems(shopifyCart.id, [
            { variantId: item.variant.id, quantity: item.quantity }
          ]);
        }
        setCart(savedCart);
        setShopifyCart(shopifyCart); // 把SDK购物车实例存在状态中
      }
    };
    initCart();
  }, []);
  

4. 检查页面组件的状态使用方式 #

查看products/[handle].tsx和pages/cart/index.tsx，别在组件内单独维护购物车的局部状态，必须通过useContext(CartContext)获取和修改状态，避免状态不一致。比如添加商品时，一定要调用Context里的addItemToCart方法，不能直接修改组件自身的useState。

5. 排查本地存储的读写异常 #

打开浏览器控制台的Application标签，检查shopify-cart条目：

• 如果没有写入记录，确认是否把对象转成了JSON字符串（必须用JSON.stringify存储对象）
• 用js-cookie时，确认设置了path: '/'，否则刷新到其他页面可能读不到缓存
• 查看控制台是否有报错，比如跨域问题（开发环境一般不会出现）或数据格式错误

6. TypeScript类型匹配问题 #

作为TS新手，可能因类型不匹配导致序列化/反序列化失败：

• 先给购物车商品定义明确的类型：

  interface CartItem {
    variant: { id: string; title: string; price: number };
    quantity: number;
  }
  

• 反序列化时做类型断言，确保数据符合定义：

  const initialCart = typeof window !== 'undefined' ? (JSON.parse(localStorage.getItem('shopify-cart') || '[]') as CartItem[]) : [];
  

内容的提问来源于stack exchange，提问作者Jordy Nelson