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

Question

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

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

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

Answer 1

这是因为您正在绑定 saveBtn 单击侦听器多点时间这里是更新的代码var arr = new Array();showData(); //delete the data from the local storagefunction deleteData(index) {&nbsp; arr.splice(parseInt(index), 1);&nbsp; var value = JSON.stringify(arr);&nbsp; localStorage.setItem("localData", value); //display the local storage data after deleting&nbsp; showData();}; //edit the data in the local storagevar editIndex= null;document.getElementById("saveBtn").addEventListener("click", function () {&nbsp; &nbsp; arr[editIndex].fName = document.getElementById("fName").value;&nbsp; &nbsp; arr[editIndex].lName = document.getElementById("lName").value;&nbsp; &nbsp; arr[editIndex].age = document.getElementById("age").value;&nbsp; &nbsp; arr[editIndex].email = document.getElementById("email").value;&nbsp; &nbsp; arr[editIndex].number = document.getElementById("number").value;&nbsp; &nbsp; localStorage.setItem("localData", JSON.stringify(arr));&nbsp; &nbsp; showData();&nbsp; });function editData(index) {&nbsp; editIndex = index;&nbsp; document.getElementById("fName").value = arr[index].fName;&nbsp; document.getElementById("lName").value = arr[index].lName;&nbsp; document.getElementById("age").value = arr[index].age;&nbsp; document.getElementById("email").value = arr[index].email;&nbsp; document.getElementById("number").value = arr[index].number;&nbsp; document.getElementById("addBtn").style.display = "none";&nbsp; document.getElementById("saveBtn").style.display = "block";}; //add data to local storagefunction addData() {&nbsp; arr.push({&nbsp; &nbsp; fName: document.getElementById("fName").value,&nbsp; &nbsp; lName: document.getElementById("lName").value,&nbsp; &nbsp; age: document.getElementById("age").value,&nbsp; &nbsp; email: document.getElementById("email").value,&nbsp; &nbsp; number: document.getElementById("number").value&nbsp; });&nbsp; localStorage.setItem("localData", JSON.stringify(arr)); //displaying the added data&nbsp; showData(); //clearing the input feild&nbsp; init();}; //get data from local storage and display the local storage data on the screenfunction showData() {&nbsp; var tbl = document.getElementById("tableDisplay");&nbsp; var str = localStorage.getItem("localData");&nbsp; var x = tbl.rows.length;&nbsp; while (--x) {&nbsp; &nbsp; tbl.deleteRow(x);&nbsp; } //checking whether the local storage is not empty&nbsp; if (str != null) {&nbsp; &nbsp; arr = JSON.parse(str);&nbsp; &nbsp; for (var i = 0; i < arr.length; i++) {&nbsp; &nbsp; &nbsp; var r = tbl.insertRow();&nbsp; &nbsp; &nbsp; r.innerHTML = "\n&nbsp; &nbsp; &nbsp; &nbsp; <td>".concat(arr[i].fName, "</td>\n&nbsp; &nbsp; &nbsp; &nbsp; <td>").concat(arr[i].lName, "</td>\n&nbsp; &nbsp; &nbsp; &nbsp; <td>").concat(arr[i].age, "</td>\n&nbsp; &nbsp; &nbsp; &nbsp; <td>").concat(arr[i].email, "</td>\n&nbsp; &nbsp; &nbsp; &nbsp; <td>").concat(arr[i].number, "</td>\n&nbsp; &nbsp; &nbsp; &nbsp; <td>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type=\"button\" class=\"btn btn-warning\" onClick=\"editData(").concat(i, ");\"> Edit </button>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type=\"button\" class=\"btn btn-danger\" onClick=\"deleteData(").concat(i, ");\"> Delete </button>\n&nbsp; &nbsp; &nbsp; &nbsp; </td>");&nbsp; &nbsp; }&nbsp; }&nbsp; init();}; //how the screen should look initiallyfunction init() {&nbsp; document.getElementById("fName").value = "";&nbsp; document.getElementById("lName").value = "";&nbsp; document.getElementById("age").value = "";&nbsp; document.getElementById("email").value = "";&nbsp; document.getElementById("number").value = "";&nbsp; document.getElementById("saveBtn").style.display = "none";&nbsp; document.getElementById("addBtn").style.display = "block";}; //empty the local storagefunction deleteLocalStorageData() {&nbsp; localStorage.clear();&nbsp; document.getElementById("tableDisplay").innerHTML = "All Data Deleted!";};document.getElementById("addBtn").addEventListener("click", addData);document.getElementById("clearBtn").addEventListener("click", deleteLocalStorageData);