如何避免对象值被覆盖？表单数据存LocalStorage遇数组覆盖问题求助

嘿，我懂你遇到的烦恼——每次提交表单，旧数据都会被新内容覆盖，没法积累多条记录对吧？这问题出在你每次提交时都直接新建了空数组，完全没把LocalStorage里已存的数据读出来合并。我来给你调整下代码，保证每一次提交的新数据都能乖乖加到数组里～

问题核心 #

你之前的逻辑大概是：每次提交都创建一个全新的空数组，把当前表单的对象推进去就直接存回LocalStorage，这样旧数组直接被覆盖掉了。正确的流程应该是：先取出已有的数组 → 加入新数据 → 再存回LocalStorage。

修改后的完整代码示例 #

// 表单提交处理函数
function saveFormData() {
  // 1. 先从LocalStorage读取已有数据，第一次提交时用空数组初始化
  let formDataArray = JSON.parse(localStorage.getItem('formData')) || [];
  
  // 2. 收集表单输入值到对象中
  const formData = {};
  const inputs = document.getElementsByTagName("input");
  const labels = document.getElementsByTagName("label");

  // 遍历所有输入框，把对应数据存入对象
  for (let i = 0; i < inputs.length; i++) {
    // 优先用input的name属性当键（比label文本更可靠），没有的话再用label文本
    const key = inputs[i].name || labels[i]?.textContent.trim();
    if (key) {
      formData[key] = inputs[i].value;
    }
  }
  
  // 3. 把新的表单对象推到数组末尾
  formDataArray.push(formData);
  
  // 4. 将更新后的数组重新存入LocalStorage（必须转成字符串）
  localStorage.setItem('formData', JSON.stringify(formDataArray));
  
  // 可选：清空表单，方便下次输入
  document.querySelector('form').reset();
  
  console.log('当前已保存的所有数据：', formDataArray);
}

// 给表单绑定提交事件（阻止默认刷新）
document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault(); // 关键：阻止表单默认提交导致的页面刷新
  saveFormData();
});

关键细节说明 #

• 读取已有数据：JSON.parse(localStorage.getItem('formData')) || [] 是核心逻辑——LocalStorage只能存储字符串，所以用JSON.parse解析；如果是第一次提交，getItem会返回null，这时用|| []初始化空数组，避免报错。
• 可靠的键名：用input的name属性作为对象的键比label文本更稳定，毕竟有时候label可能缺失或者文本有多余空格，建议给每个input都加上name属性哦。
• 阻止默认提交：如果用表单的submit事件，一定要加e.preventDefault()，否则页面刷新会导致代码执行中断，数据存不上。

验证方法 #

你可以打开浏览器的开发者工具（F12）→ 找到「Application」（或「存储」）→ 「LocalStorage」，每次提交后就能看到formData对应的数组在不断新增元素啦～

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