如何替换数组中对象内的值？

Question

我面临的问题是我试图用编辑功能替换文本和日期。我让它工作到了通过 DOM 替换文本的程度，但是当页面刷新时，编辑的版本将重置为其旧值。我想我知道为什么，这是因为数组中对象内的值需要保持更改，但事实并非如此，我认为我做得不正确。

我认为也许使用地图，它可以创建一个新数组并在 DOM 上渲染更新后的数组。

请查看以下代码：

let Editedmodal = document.querySelector("#edit-modal");
let editBtn = document.querySelector(".edit");

function editTask(id) {
  let taskIndex = taskArray.findIndex((task) => task.id === id);
  let taskElement = document.querySelector(`.task-to-do[data-id="${id}"]`);

  let Editedmodal = document.querySelector("#edit-modal");


  EditedInputTask.value = taskArray[taskIndex].task;
  EditedInputDate.value = taskArray[taskIndex].date;

  Editedmodal.style.display = "grid";
  /*Submit Edited task Form*/
  EditedsubmitForm.addEventListener("click", (e) => {

    e.preventDefault();
    /*Form Validaion*/
    if (!EditedInputTask.value) {
      EditedInputNoTask.style.display = "block";
      EditedInputTask.style.marginTop = "-1em";
      timeout = setTimeout(() => {
        EditedInputNoTask.style.display = "none";
        EditedInputTask.style.marginTop = "0";
      }, 3000);
    }

    if (!EditedInputDate.value) {
      EditedInputNoDate.style.display = "block";
      EditedInputDate.style.marginTop = "-1em";

      timeout = setTimeout(() => {
        EditedInputNoDate.style.display = "none";
        EditedInputDate.style.marginTop = "0";
      }, 3000);
    } else {
      Editedmodal.style.display = "none";
      EditedInputTask.value = "";
      EditedInputDate.value = "";
      taskArray[taskIndex].task = taskObjEdited;
      taskArray[taskObjEdited.task] = DateStore;
    }

    taskArray[taskIndex].task = EditedInputTask.value;
    taskArray[taskIndex].date = EditedInputDate.value;

    taskElement.querySelector("#list-item-date").textContent = `Due: ${taskArray[taskIndex].date}`;
    taskElement.querySelector("#list-item-task").textContent = taskArray[taskIndex].task;

  });

function storeTaskArrayLocally() {
  localStorage.setItem("taskLocalstorage", JSON.stringify(taskArray));
}

function initializeTaskAraryFromLocalStoraege() {
  const storedTask = localStorage.getItem("taskLocalstorage");

  if (storedTask) {
    taskArray = JSON.parse(storedTask);
    renderTask();
  }
}

Answer 1

当您更改任务数组中的任务时，您需要再次将数组存储在 localStorage 中：

  // change the task in the array
  taskArray[taskIndex].task = EditedInputTask.value;
  taskArray[taskIndex].date = EditedInputDate.value;
  // store the task array in localStorage
  storeTaskArrayLocally();