使用localStorage存储表单汇总数据，页面重启后数据丢失问题求助

问题根因排查 #

你现在的代码存在4个核心错误，导致刷新后无法正常读取存储的数据：

1. 逻辑执行顺序完全颠倒
   你先给outPut_two赋值了innerHTML，再执行outPut_two.children.length === 0的判断，此时outPut_two已经有子元素，判断分支永远不会触发，自然不会读取localStorage渲染内容。
2. API拼写错误
   读取金额的代码写的是window.localStorage.geItem，少了一个字母t，正确写法是getItem，这个错误会导致读取金额时报错，打断渲染逻辑。
3. 没有初始化数组数据
   你只存储了汇总计算的结果，没有把历史记录的原始数组（sumaRodzin/hivesTotal/moenyTotal/peopleTotal）存入localStorage，页面刷新后这些数组都是空值，就算你渲染了历史汇总结果，后续新增提交时还是会从0开始累加，达不到“在历史基础上新增”的需求。
4. 没有在页面初始化阶段读取本地存储
   你读取localStorage的逻辑放在了汇总计算之后，页面刚加载的时候不会主动读取本地存储的历史数据，自然没有内容展示。

修复方案 #

步骤1：调整存储逻辑，存储原始数组而不是仅存汇总值 #

每次用户提交表单、往数组中push新数据后，直接把四个数组存入localStorage，不要只存汇总结果：

// 每次提交新数据后，同步更新本地存储
window.localStorage.setItem("sumaRodzin", JSON.stringify(sumaRodzin));
window.localStorage.setItem("hivesTotal", JSON.stringify(hivesTotal));
window.localStorage.setItem("moenyTotal", JSON.stringify(moenyTotal));
window.localStorage.setItem("peopleTotal", JSON.stringify(peopleTotal));

步骤2：页面初始化时先读取本地存储，初始化数组 #

页面加载完成后第一时间读取本地存储的数组数据，如果有值就赋值给对应的数组变量，同时直接计算汇总渲染到页面：

// 页面初始化时执行
window.addEventListener('load', () => {
  // 读取本地存储的历史数组
  const savedSumaRodzin = JSON.parse(window.localStorage.getItem('sumaRodzin')) || [];
  const savedHivesTotal = JSON.parse(window.localStorage.getItem('hivesTotal')) || [];
  const savedMoenyTotal = JSON.parse(window.localStorage.getItem('moenyTotal')) || [];
  const savedPeopleTotal = JSON.parse(window.localStorage.getItem('peopleTotal')) || [];
  
  // 赋值给全局数组变量，后续新增提交可以直接在这个基础上push
  sumaRodzin = savedSumaRodzin;
  hivesTotal = savedHivesTotal;
  moenyTotal = savedMoenyTotal;
  peopleTotal = savedPeopleTotal;
  
  // 直接计算汇总，渲染到页面
  const beesSumTotal = sumaRodzin.reduce((a, b) => a + b, 0);
  const hivesSumTotal = hivesTotal.reduce((a, b) => a + b, 0);
  const moenySumTotal = moenyTotal.reduce((a, b) => a + b, 0);
  const peopleSumTotal = peopleTotal.length;
  
  outPut_two.innerHTML = `<p>Rodzin łącznie: <br> <span class="display-2">${beesSumTotal}</span></p> <p>Pasiek łącznie:<br> <span class="display-2"> ${hivesSumTotal}</p> <p>Wpłaciło osób:<br> <span class="display-2">${peopleSumTotal}</p> <p>Zebrano:<br><span class="display-1"> ${moenySumTotal}</span> zł <p> <p class="small">raport składek</b> / ${new Date().toLocaleDateString()} / ${new Date().toLocaleTimeString()}`
})

步骤3：删除原来的错误逻辑 #

删掉原来写在汇总计算后面的if (outPut_two.children.length === 0)分支判断，以及对应的渲染逻辑，避免冲突。

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