javascript - 如何在不影响其他数据的情况下编辑本地存储数据？

Question

我想在单击编辑时编辑本地存储数据，而不影响本地存储中的任何其他数据。

我在这里提到了代码，但是前 3 次值得到正确编辑时会发生什么，但是下次我单击本地存储的其他一些数据时会受到影响。

我只想使用 javascript 而不是 jquery。 我无法理解错误在哪里。

let arr = new Array();

showData();

//delete the data from the local storage
function deleteData(index) {
  arr.splice(parseInt(index), 1);
  let value = JSON.stringify(arr);
  localStorage.setItem("localData",value);

  //display the local storage data after deleting
  showData();
};

//edit the data in the local storage
function editData(index) {

  document.getElementById("fName").value = arr[index].fName;
  document.getElementById("lName").value = arr[index].lName;
  document.getElementById("age").value = arr[index].age;
  document.getElementById("email").value = arr[index].email;
  document.getElementById("number").value = arr[index].number;

  document.getElementById("addBtn").style.display = "none";
  document.getElementById("saveBtn").style.display = "block";

  document.getElementById("saveBtn").addEventListener("click", () => {
    let localData = JSON.parse(localStorage.getItem("localData"));
    localData[index].fName = document.getElementById("fName").value;
    localData[index].lName = document.getElementById("lName").value;
    localData[index].age = document.getElementById("age").value;
    localData[index].email = document.getElementById("email").value;
    localData[index].number = document.getElementById("number").value;
    localStorage.setItem("localData", JSON.stringify(localData));
    showData();
  });
};

//add data to local storage
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));

  //displaying the added data
  showData();

  //clearing the input feild
  init();
};

//get data from local storage and display the local storage data on the screen
function showData(){
  let tbl = document.getElementById("tableDisplay");
  let str = localStorage.getItem("localData");
  let x = tbl.rows.length;

  while(--x){
    tbl.deleteRow(x);
  }
  //checking whether the local storage is not empty
  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();
};

//how the screen should look initially
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";
};

//empty the local storage
function deleteLocalStorageData(){
  localStorage.clear();
  document.getElementById("tableDisplay").innerHTML = "All Data Deleted!";
};

document.getElementById("addBtn").addEventListener("click", addData);
document.getElementById("clearBtn").addEventListener("click", deleteLocalStorageData);

Answer 1

这是因为你绑定(bind)了 saveBtn click listener multipal time 这是更新的代码

var arr = new Array();
showData(); //delete the data from the local storage

function deleteData(index) {
  arr.splice(parseInt(index), 1);
  var value = JSON.stringify(arr);
  localStorage.setItem("localData", value); //display the local storage data after deleting

  showData();
}

; //edit the data in the local storage

var editIndex= null;
document.getElementById("saveBtn").addEventListener("click", function () {

    arr[editIndex].fName = document.getElementById("fName").value;
    arr[editIndex].lName = document.getElementById("lName").value;
    arr[editIndex].age = document.getElementById("age").value;
    arr[editIndex].email = document.getElementById("email").value;
    arr[editIndex].number = document.getElementById("number").value;

    localStorage.setItem("localData", JSON.stringify(arr));
    showData();
  });

function editData(index) {
  editIndex = index;
  document.getElementById("fName").value = arr[index].fName;
  document.getElementById("lName").value = arr[index].lName;
  document.getElementById("age").value = arr[index].age;
  document.getElementById("email").value = arr[index].email;
  document.getElementById("number").value = arr[index].number;
  document.getElementById("addBtn").style.display = "none";
  document.getElementById("saveBtn").style.display = "block";

}

; //add data to local storage

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)); //displaying the added data

  showData(); //clearing the input feild

  init();
}

; //get data from local storage and display the local storage data on the screen

function showData() {
  var tbl = document.getElementById("tableDisplay");
  var str = localStorage.getItem("localData");
  var x = tbl.rows.length;

  while (--x) {
    tbl.deleteRow(x);
  } //checking whether the local storage is not empty


  if (str != null) {
    arr = JSON.parse(str);

    for (var i = 0; i < arr.length; i++) {
      var r = tbl.insertRow();
      r.innerHTML = "\n        <td>".concat(arr[i].fName, "</td>\n        <td>").concat(arr[i].lName, "</td>\n        <td>").concat(arr[i].age, "</td>\n        <td>").concat(arr[i].email, "</td>\n        <td>").concat(arr[i].number, "</td>\n        <td>\n          <button type=\"button\" class=\"btn btn-warning\" onClick=\"editData(").concat(i, ");\"> Edit </button>\n          <button type=\"button\" class=\"btn btn-danger\" onClick=\"deleteData(").concat(i, ");\"> Delete </button>\n        </td>");
    }
  }

  init();
}

; //how the screen should look initially

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";
}

; //empty the local storage

function deleteLocalStorageData() {
  localStorage.clear();
  document.getElementById("tableDisplay").innerHTML = "All Data Deleted!";
}

;
document.getElementById("addBtn").addEventListener("click", addData);
document.getElementById("clearBtn").addEventListener("click", deleteLocalStorageData);