Next.js中localStorage刷新数据丢失及初始化报错求助

问题原因分析 #

1. localStorage未定义报错：Next.js是服务端渲染（SSR）框架，服务端环境没有window对象，直接在useState初始化函数中调用localStorage会触发报错——因为该初始化逻辑在服务端渲染阶段也会执行。
2. 刷新后数据丢失：你原代码的两个useEffect执行顺序导致初始空数组覆盖了本地存储数据：组件初始化时todos默认值为[]，触发保存逻辑的useEffect先将空数组写入localStorage，随后读取逻辑的useEffect只能读到空数组，最终导致原有数据丢失。

正确实现方案 #

方案一：修正useEffect执行逻辑（推荐） #

通过调整状态初始值和useEffect触发条件，避免初始空数组覆盖本地存储，同时确保仅在客户端环境操作localStorage：

import { useState, useEffect } from 'react';

export default function TodoComponent() {
  // 初始状态设为null，避免触发初始保存逻辑
  const [todos, setTodos] = useState(null);

  // 仅在客户端挂载时读取localStorage
  useEffect(() => {
    const storedTodos = JSON.parse(localStorage.getItem('todos')) || [];
    setTodos(storedTodos);
  }, []);

  // 仅当todos完成初始化后，才保存到localStorage
  useEffect(() => {
    if (todos !== null) {
      localStorage.setItem('todos', JSON.stringify(todos));
    }
  }, [todos]);

  // 渲染前判断todos是否就绪，避免null导致的渲染错误
  if (todos === null) {
    return null; // 也可以替换为自定义加载中组件
  }

  // 后续的todos操作与渲染逻辑
  return (
    <div>
      {/* 你的组件内容 */}
    </div>
  );
}

方案二：带客户端判断的useState初始化 #

如果希望直接在useState中初始化数据，需要先判断当前环境是否为客户端，避免服务端报错，但可能会触发React Hydrate不匹配警告（因服务端与客户端初始状态不一致）：

import { useState, useEffect } from 'react';

export default function TodoComponent() {
  const [todos, setTodos] = useState(() => {
    // 仅在客户端环境读取localStorage
    if (typeof window !== 'undefined') {
      return JSON.parse(localStorage.getItem('todos')) || [];
    }
    // 服务端返回空数组，保证SSR渲染一致性
    return [];
  });

  // 监听todos变化，保存到localStorage
  useEffect(() => {
    localStorage.setItem('todos', JSON.stringify(todos));
  }, [todos]);

  // 组件渲染逻辑
  return (
    <div>
      {/* 你的组件内容 */}
    </div>
  );
}

关键注意点 #

• 所有操作localStorage的代码必须确保在客户端环境执行，可通过typeof window !== 'undefined'判断，或放在useEffect中（useEffect仅在客户端挂载后执行）。
• 避免用初始空状态直接覆盖本地存储数据，通过状态标记（如null）区分未初始化和真实空数据状态。

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