如何修改LocalStorage数据不影响其他数据？代码异常排查求助

你遇到的问题核心在于重复绑定事件监听器：每次点击编辑按钮调用editData时，都会给saveBtn新增一个click事件处理函数。前几次编辑可能因为事件次数少没暴露问题，但多次编辑后，点击保存按钮会触发多个事件回调——每个回调都拿着当时的index值去修改数据，结果就是多个旧的修改逻辑同时执行，导致错误地修改了其他数组项。

我们可以把保存按钮的事件监听移到全局，用一个全局变量存储当前正在编辑的索引，这样就不会重复绑定事件了。以下是修改后的完整代码：

let arr = new Array();
let currentEditIndex = -1; // 新增：存储当前编辑的索引
showData();

// 删除数据
function deleteData(index) {
  arr.splice(parseInt(index), 1);
  localStorage.setItem("localData", JSON.stringify(arr));
  showData();
};

// 编辑数据：只负责填充表单和记录索引，不绑定保存事件
function editData(index) {
  currentEditIndex = index; // 记录当前编辑的索引
  const item = arr[index];
  document.getElementById("fName").value = item.fName;
  document.getElementById("lName").value = item.lName;
  document.getElementById("age").value = item.age;
  document.getElementById("email").value = item.email;
  document.getElementById("number").value = item.number;
  
  document.getElementById("addBtn").style.display = "none";
  document.getElementById("saveBtn").style.display = "block";
};

// 新增数据
function addData(){
  arr.push({
    fName: document.getElementById("fName").value,
    lName: document.getElementById("lName").value,
    age: document.getElementById("age").value,
    email: document.getElementById("email").value,
    number: document.getElementById("number").value,
  });
  localStorage.setItem("localData", JSON.stringify(arr));
  showData();
  init();
};

// 保存编辑的数据：单独的函数，全局绑定事件
function saveEditData() {
  if (currentEditIndex === -1) return; // 没有编辑项时直接返回
  
  let localData = JSON.parse(localStorage.getItem("localData"));
  localData[currentEditIndex].fName = document.getElementById("fName").value;
  localData[currentEditIndex].lName = document.getElementById("lName").value;
  localData[currentEditIndex].age = document.getElementById("age").value;
  localData[currentEditIndex].email = document.getElementById("email").value;
  localData[currentEditIndex].number = document.getElementById("number").value;
  
  localStorage.setItem("localData", JSON.stringify(localData));
  showData();
  currentEditIndex = -1; // 重置编辑索引
};

// 展示数据
function showData(){
  let tbl = document.getElementById("tableDisplay");
  let str = localStorage.getItem("localData");
  let x = tbl.rows.length;
  
  while(--x){
    tbl.deleteRow(x);
  }
  
  if(str != null){
    arr = JSON.parse(str);
    for( let i=0; i<arr.length ; i++ ){
      let r = tbl.insertRow();
      r.innerHTML=`
        <td>${arr[i].fName}</td>
        <td>${arr[i].lName}</td>
        <td>${arr[i].age}</td>
        <td>${arr[i].email}</td>
        <td>${arr[i].number}</td>
        <td>
          <button type="button" class="btn btn-warning" onClick="editData(${i});"> Edit </button>
          <button type="button" class="btn btn-danger" onClick="deleteData(${i});"> Delete </button>
        </td>`;
    }
  }
  init();
};

// 初始化表单
function init(){
  document.getElementById("fName").value = "";
  document.getElementById("lName").value = "";
  document.getElementById("age").value = "";
  document.getElementById("email").value = "";
  document.getElementById("number").value = "";
  document.getElementById("saveBtn").style.display = "none";
  document.getElementById("addBtn").style.display = "block";
  currentEditIndex = -1; // 初始化时重置编辑索引
};

// 清空本地存储
function deleteLocalStorageData(){
  localStorage.clear();
  document.getElementById("tableDisplay").innerHTML = "All Data Deleted!";
};

// 全局绑定事件：只绑定一次
document.getElementById("addBtn").addEventListener("click", addData);
document.getElementById("clearBtn").addEventListener("click", deleteLocalStorageData);
document.getElementById("saveBtn").addEventListener("click", saveEditData); // 新增：全局绑定保存事件

• 新增currentEditIndex全局变量，专门用来记录当前正在编辑的数组项索引，避免每次编辑都绑定新的事件。
• 把原来写在editData里的保存逻辑抽成独立的saveEditData函数，只在全局绑定一次click事件，彻底避免重复绑定。
• 在editData里只负责填充表单和设置currentEditIndex，不再处理事件绑定。
• 在init和saveEditData完成后重置currentEditIndex，确保状态正确。

这样修改后，无论点击多少次编辑按钮，保存按钮都只会执行一次正确的修改逻辑，不会再影响其他数据了。

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