费用追踪器表单提交时for of循环导致显示重复问题

你的判断完全正确，重复显示的问题出在display()函数的渲染逻辑上：每次调用这个函数时，你用innerHTML +=把新的表格行追加到已有内容后面，但没有先清空之前渲染的旧内容。这就导致每次提交表单后，localStorage里的所有数据都会被重新遍历渲染一遍，叠加在原有内容之上，最终出现重复条目。

修复方法 #

在display()函数里，遍历渲染数据之前，先清空目标元素的内容：

function display() {
  let display = document.getElementById("display")
  let results = JSON.parse(localStorage.getItem("ex_data")) || []; // 加默认值避免null报错
  
  // 先清空已有内容
  display.innerHTML = '';
  
  for (const info of results) {
    display.innerHTML += `
            <tr>
                <td>${info.name}</td>
                <td>${info.selection}</td>
                <td>${info.amount}</td>
            </tr>`
  }
}

额外优化建议 #

1. 在解析localStorage数据时加上|| []，避免localStorage里没有数据时JSON.parse返回null，导致后续遍历出错。
2. 数据量较大时，用文档片段（DocumentFragment）拼接DOM元素比直接修改innerHTML性能更好：

function display() {
  let display = document.getElementById("display")
  let results = JSON.parse(localStorage.getItem("ex_data")) || [];
  display.innerHTML = '';
  
  const fragment = document.createDocumentFragment();
  results.forEach(info => {
    const tr = document.createElement('tr');
    tr.innerHTML = `
      <td>${info.name}</td>
      <td>${info.selection}</td>
      <td>${info.amount}</td>
    `;
    fragment.appendChild(tr);
  });
  
  display.appendChild(fragment);
}

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