如何在 UI 上编辑文本并使用 Javascript 更新 localStorage 中的更改

Question

我正在努力编辑 ToDo 应用程序上的任务并更新 localstorage 对象中的更改。我试过 contenteditable 来编辑 UI 上的文本。但是，我无法更新对 localstorage 数组的更改。这是我正在使用的代码。任何建议将不胜感激！

// Edit task

const eidtTask = (e) => {

   // Array of objects of tasks

   const tasks = JSON.parse(localStorage.getItem('tasks'));

   if(e.target.classList.contains('edit')) {

        // When I click edit button I want to edit the task and update the value on localstorage array as well

   }

   localStorage.setItem('tasks', JSON.stringify(tasks));

};

Answer 1

在 HTML 元素中有一个数据属性，并oldValue在本地存储数据中有一个可以更新本地存储的数据一旦用户点击提交或完成编辑，更改 HTML 数据属性和oldValue本地存储。// Edit taskconst editTask = (e) => {  // Array of objects of tasks  const tasks = JSON.parse(localStorage.getItem('tasks'));  if (e.target.classList.contains('edit')) {    for (const task of tasks) {      if (task.oldValue === e.target.getAttribute('data-foo')) {        task.value = e.target.value;      }    }  }  localStorage.setItem('tasks', JSON.stringify(tasks));};