如何修改数组中对象的属性值？解决页面刷新后数据重置问题

问题描述 #

我正在实现一个任务编辑功能，支持修改任务文本和日期。目前能通过DOM更新页面显示内容，但刷新后编辑的内容会变回原值。我猜测是数组里的对象属性没被正确修改，导致无法持久化。考虑用map方法创建新数组并重新渲染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();
  }
}

问题排查与修复方案 #

1. 未同步更新本地存储 #

修改taskArray后，没有调用storeTaskArrayLocally()将更新后的数组保存到localStorage，导致刷新页面时读取的还是旧数据。必须在修改数组后执行存储操作。

2. 冗余且错误的赋值代码 #

else分支中的两行代码taskArray[taskIndex].task = taskObjEdited;和taskArray[taskObjEdited.task] = DateStore;完全无效：

• taskObjEdited和DateStore未定义，会抛出ReferenceError
• 后续代码重新给taskArray[taskIndex].task和date赋值，这两行逻辑完全多余，直接删除即可。

3. 重复绑定点击事件 #

每次调用editTask(id)都会给EditedsubmitForm绑定一次点击事件，多次编辑后会触发多次回调，导致数据混乱。解决方法：

• 将事件监听移到editTask函数外部，只绑定一次
• 或者在绑定新事件前移除旧的监听（使用removeEventListener）

4. 表单验证逻辑缺陷 #

当前验证是分开判断的，即使任务文本为空，只要日期不为空就会进入else分支关闭模态框。应该改为只有当两个输入都有效时才执行更新操作。

修正后的核心代码示例 #

// 全局变量存储当前编辑的任务索引和DOM元素（或用闭包/自定义属性替代）
let currentTaskIndex;
let currentTaskElement;

// 只绑定一次提交事件
EditedsubmitForm.addEventListener("click", (e) => {
  e.preventDefault();
  let isValid = true;

  // 任务文本验证
  if (!EditedInputTask.value) {
    EditedInputNoTask.style.display = "block";
    EditedInputTask.style.marginTop = "-1em";
    setTimeout(() => {
      EditedInputNoTask.style.display = "none";
      EditedInputTask.style.marginTop = "0";
    }, 3000);
    isValid = false;
  }

  // 日期验证
  if (!EditedInputDate.value) {
    EditedInputNoDate.style.display = "block";
    EditedInputDate.style.marginTop = "-1em";
    setTimeout(() => {
      EditedInputNoDate.style.display = "none";
      EditedInputDate.style.marginTop = "0";
    }, 3000);
    isValid = false;
  }

  // 验证通过才执行更新
  if (isValid) {
    Editedmodal.style.display = "none";
    // 更新数组数据
    taskArray[currentTaskIndex].task = EditedInputTask.value;
    taskArray[currentTaskIndex].date = EditedInputDate.value;
    // 同步到本地存储
    storeTaskArrayLocally();
    // 更新DOM显示
    currentTaskElement.querySelector("#list-item-date").textContent = `Due: ${taskArray[currentTaskIndex].date}`;
    currentTaskElement.querySelector("#list-item-task").textContent = taskArray[currentTaskIndex].task;
    // 清空输入框
    EditedInputTask.value = "";
    EditedInputDate.value = "";
  }
});

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

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

  Editedmodal.style.display = "grid";
}

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

function initializeTaskAraryFromLocalStoraege() {
  const storedTask = localStorage.getItem("taskLocalstorage");
  if (storedTask) {
    taskArray = JSON.parse(storedTask);
    renderTask();
  }
}

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