动态生成HTML表格修改值后如何同步更新LocalStorage对应ID的员工数据

现有代码存在以下核心问题导致LocalStorage更新异常：

• 页面初始化时没有将LocalStorage存储的员工数据赋值给全局empDetails数组，刷新后操作会丢失原有数据
• 表格行内元素重复使用相同ID，违反HTML规范，导致document.getElementById永远只能取到第一个匹配元素，取值错误
• 原tableUpdate函数的嵌套循环逻辑错误，会将所有员工条目都覆盖为当前修改的数值
• 删除行操作仅删除了DOM元素，没有同步更新LocalStorage和全局数组

1. 修正初始化加载逻辑 #

原初始化逻辑仅调用遍历但没有读取LocalStorage数据到全局数组，修改为：

if (localStorage.getItem("empDetails")) {
  // 先读取本地存储数据到全局数组
  empDetails = JSON.parse(localStorage.getItem("empDetails"));
  empDetails.forEach((empDetail) => {
    createTableRow(empDetail);
  });
}

2. 重写tableUpdate函数 #

核心逻辑是通过当前编辑行的隐藏唯一ID匹配LocalStorage对应条目，无需遍历所有行：

function tableUpdate(e) {
  // 更新页面表格显示
  tr.cells[0].textContent = employeeId.value;
  tr.cells[1].textContent = employeeName.value;
  tr.cells[2].textContent = designation.value;
  tr.cells[3].textContent = `$${salary.value.replace('$','')}`; // 统一处理薪资的$符号

  // 拿到当前编辑行对应的LocalStorage唯一ID（最后一个隐藏单元格的内容）
  const currentEmpId = Number(tr.cells[5].textContent);

  // 匹配全局数组中对应ID的员工条目，更新数值
  const targetEmp = empDetails.find(emp => emp.id === currentEmpId);
  if (targetEmp) {
    targetEmp.name.employeeIdLocal = employeeId.value;
    targetEmp.name.employeeNameLocal = employeeName.value;
    targetEmp.name.designationLocal = designation.value;
    targetEmp.name.salaryLocal = salary.value.replace('$',''); // 仅存储原始薪资数值
  }

  // 同步更新到LocalStorage
  localStorage.setItem("empDetails", JSON.stringify(empDetails));

  // 重置编辑状态
  modalForm.reset();
  modal.close();
  tr = null; // 清空编辑行标记，避免后续新增操作被误判为编辑
}

3. 补充删除行同步逻辑（可选但必要） #

原删除操作仅删除DOM，没有同步更新存储，修改onDeleteRow函数：

function onDeleteRow(e) {
  if (!e.target.classList.contains("remove-row")) {
    return;
  }
  const btn = e.target;
  const delTr = btn.closest("tr");
  // 读取待删除员工的唯一ID
  const delEmpId = Number(delTr.cells[5].textContent);
  // 从全局数组过滤掉该员工条目
  empDetails = empDetails.filter(emp => emp.id !== delEmpId);
  // 同步更新LocalStorage
  localStorage.setItem("empDetails", JSON.stringify(empDetails));
  // 最后删除DOM元素
  delTr.remove();
}

4. 修正createTableRow重复ID问题（可选但符合规范） #

原代码每个表格行的单元格都使用了相同ID，违反HTML规范，直接移除冗余ID属性即可：

function createTableRow(empDetail) {
  const tEmployeeMarkup = `
  <tr class="fullEmpDetail">
    <td>${empDetail.name.employeeIdLocal}</td>
    <td>${empDetail.name.employeeNameLocal}</td>
    <td>${empDetail.name.designationLocal}</td>
    <td>$${empDetail.name.salaryLocal}</td>
    <td>
      <i class="fas fa-eye"></i>
      <i value="Edit" type="button" class="edit-row fas fa-pencil-alt"></i>
      <i value="Delete" type="button" class="remove-row fas fa-trash-alt"></i>
    </td>
    <td class="empDetailId">${empDetail.id}</td>
  </tr>
`;
  empTable.innerHTML += tEmployeeMarkup;
  document.getElementById("modal-form").reset();
}

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