Next.js中localStorage刷新丢失数据问题及修复咨询

问题分析 #

你当前的代码在修改card时能正常同步到localStorage，但刷新页面后card变回空数组，核心原因是：

1. 初始useState直接设为空数组，组件首次渲染（包括SSR阶段）会先用这个空值；
2. 读取localStorage的useEffect是组件挂载后才执行，存在渲染时机差；
3. Next.js服务端渲染时没有浏览器的localStorage对象，导致服务端不会执行读取逻辑，客户端 hydration 时可能出现状态不匹配。

修复代码 #

把localStorage的读取逻辑移到useState的初始化函数中，同时兼容服务端环境：

import { useState, useEffect } from 'react';

export default function YourComponent() {
  // 初始化时直接从localStorage读取数据，仅在客户端执行
  const [card, setCard] = useState(() => {
    if (typeof window !== 'undefined') {
      const storedItems = localStorage.getItem('items');
      // 避免JSON解析失败导致报错
      try {
        return storedItems ? JSON.parse(storedItems) : [];
      } catch (err) {
        console.error('解析localStorage数据失败:', err);
        return [];
      }
    }
    return [];
  });

  // 当card变化时，同步更新localStorage
  useEffect(() => {
    localStorage.setItem('items', JSON.stringify(card));
  }, [card]);

  // 你的其他组件逻辑...
}

关键修改点 #

• 初始化时读取localStorage：避免组件先渲染空数组再更新的问题，确保初始状态就是本地存储的数据；
• 兼容服务端环境：通过typeof window !== 'undefined'判断，避免服务端渲染时因不存在localStorage报错；
• 增加错误捕获：防止localStorage中的数据格式错误导致JSON解析失败，保障代码健壮性；
• 变量名规范：把setcard改为setCard，符合React小驼峰命名习惯。

关于Cookie方案的补充 #

Cookie的单条存储上限约4KB，数据量增大后确实无法满足需求，转用localStorage是合理选择——localStorage单域存储上限约5MB，足够承载较大的购物车数据。

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