如何在Local Storage中存储多数组对象并读取？解决初始值undefined问题

问题根源分析 #

1. 函数调用错误：你打印的是函数本身getStoredDataFunc，而非调用函数getStoredDataFunc()，导致输出无效的{}。
2. 旧数据循环污染：如果之前LocalStorage已存入属性为undefined的对象，后续每次渲染都会读取该错误数据，将state初始化为undefined，再通过useEffect存回LocalStorage，形成恶性循环。
3. 冗余读取操作：getStoredDataFunc中重复调用localStorage.getItem，虽不影响功能，但可优化。

修复步骤 #

步骤1：清理旧错误数据 #

打开浏览器控制台（F12），进入「Application/Storage/LocalStorage」，找到storageData项并删除，确保首次访问能触发默认空数组对象的返回逻辑。

步骤2：修正数据读取函数 #

优化函数逻辑，避免重复读取，同时给解析后的数据加兜底，防止属性缺失：

const getStoredDataFunc = () => {
  const storedData = localStorage.getItem('storageData');
  if (storedData) {
    const parsedData = JSON.parse(storedData);
    // 兜底处理：属性不存在时返回空数组
    return {
      videoData: parsedData.videoData || [],
      playlistName: parsedData.playlistName || [],
      playlistObj: parsedData.playlistObj || [],
      videoIds: parsedData.videoIds || [],
      notesArr: parsedData.notesArr || []
    };
  } else {
    return {
      videoData: [],
      playlistName: [],
      playlistObj: [],
      videoIds: [],
      notesArr: []
    };
  }
};

// 修正console.log：调用函数而非打印函数本身
console.log(getStoredDataFunc());

步骤3：优化state初始化 #

避免多次调用读取函数，只执行一次并解构赋值，提升性能：

const initialData = getStoredDataFunc();
const [videoData, setvideoData] = useState(initialData.videoData);
const [playlistName, setplaylistName] = useState(initialData.playlistName);
const [playlistObj, setplaylistObj] = useState(initialData.playlistObj);
const [videoIds, setvideoIds] = useState(initialData.videoIds);
const [notesArr, setnotesArr] = useState(initialData.notesArr);

步骤4：加固useEffect存入逻辑 #

给存入的属性加兜底，防止state意外变为undefined时污染LocalStorage：

useEffect(() => {
  const obj = {
    videoData: videoData || [],
    playlistName: playlistName || [],
    playlistObj: playlistObj || [],
    videoIds: videoIds || [],
    notesArr: notesArr || []
  };
  localStorage.setItem('storageData', JSON.stringify(obj));
}, [videoData, playlistObj, playlistName, videoIds, notesArr]);

验证结果 #

重新打开页面，首次访问时LocalStorage会自动存入预期格式的对象：

{videoData: [], playlistName: [], playlistObj: [], videoIds: [], notesArr: []}

后续修改state时，useEffect会自动同步更新LocalStorage数据，不会再出现属性为undefined的情况。

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