React页面刷新后LocalStorage数据丢失，求助解决方案

根据你提供的代码，我整理了几个关键的排查和修复点，帮你定位问题：

1. 修复JSON解析的异常处理 #

你的retrivedTasks函数没有处理JSON解析失败的场景，如果LocalStorage中存储的tasks数据格式不合法（比如之前意外存入了非JSON字符串），JSON.parse会抛出错误，导致setTasks无法执行。此时组件初始的空数组会通过saveToLocal覆盖到LocalStorage，直接造成刷新后数据丢失。

修改后的retrivedTasks：

const retrivedTasks = () => {
  try {
    const savedTasks = localStorage.getItem("tasks");
    if (!savedTasks) {
      localStorage.setItem("tasks", JSON.stringify([]));
      return;
    }
    const dataFromLS = JSON.parse(savedTasks);
    // 确保解析结果是数组，避免非数组数据干扰
    setTasks(Array.isArray(dataFromLS) ? dataFromLS : []);
  } catch (err) {
    console.error("读取本地任务数据失败:", err);
    // 解析出错时重置本地存储
    localStorage.setItem("tasks", JSON.stringify([]));
    setTasks([]);
  }
};

2. 优化State初始化逻辑，规避时序问题 #

当前你依赖组件挂载时的useEffect读取LocalStorage，但组件初始化时tasks默认是空数组，若读取LocalStorage的过程出现延迟或失败，空数组会被saveToLocal写入，覆盖原有数据。

更稳妥的方式是直接在useState初始化时读取LocalStorage：

const [tasks, setTasks] = useState(() => {
  try {
    const savedTasks = localStorage.getItem("tasks");
    return savedTasks ? JSON.parse(savedTasks) : [];
  } catch (err) {
    console.error("初始化任务列表失败:", err);
    localStorage.setItem("tasks", JSON.stringify([]));
    return [];
  }
});

这样可以移除第一个useEffect，组件挂载时直接获取正确的初始值，避免时序冲突。

3. 排查环境与代码干扰 #

• 浏览器隐私设置：检查是否开启了无痕模式，或设置了"关闭浏览器时清除站点数据"，这类设置会自动清空LocalStorage。
• 其他代码影响：排查项目中是否有其他地方调用localStorage.removeItem("tasks")或修改tasks存储键的逻辑，比如其他组件、全局工具函数。
• 验证写入结果：在saveToLocal中添加日志，确认每次写入的数据是否正确，同时在浏览器开发者工具的Application面板查看LocalStorage中的tasks值，刷新后检查数据是否保留。

const saveToLocal = () => {
  console.log("存储的任务数据:", tasks);
  localStorage.setItem("tasks", JSON.stringify(tasks));
};

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