LocalStorage - 无法从待办事项列表中删除项目答案

【问题标题】：LocalStorage- not able to remove items from todo listLocalStorage - 无法从待办事项列表中删除项目
【发布时间】：2021-06-09 18:48:44
【问题描述】：

我最近开始在不依赖编码教程的情况下处理我的待办事项列表，这非常困难。我可以在我的列表中添加项目，但我无法删除项目。当我单击项目时，所有项目都会被删除。你能帮忙吗？

   <fieldset>
      <legend class="task-list-title">Goals that I need to work on</legend>
        <input
         id="inpKey" 
         type="text"
         placeholder="add new goal"
         aria-label="new list name"
    <button type="button" id="btnInsert">New Goal</button>
    <div id="task_list">

    </div>
</fieldset>

JavaScript 代码

const inpKey  = document.getElementById("inpKey");
const btnInsert = document.getElementById("btnInsert");
const task_list = document.getElementById("task_list");

btnInsert.onclick = function() {
const key = inpKey.value;
   if(key) {
     localStorage.setItem(key, inpKey.value);
     location.reload();
     }
}

for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
task_list.innerHTML += `${key}<br />`
}

task_list.onclick = function() { 
  for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  window.localStorage.removeItem(key);
  task_list.innerHTML = key; 
    } 
 }

【问题讨论】：

我认为主要问题是很难找到单击了哪个列表项，因为您将列表存储为类似abc xyz  的字符串。现在当我们想删除 abc 并点击它时，实际上整个字符串都被点击了abc xyz ，所以很难找到需要删除哪个 localStorage 键。

标签： javascript html dom local-storage

【解决方案1】：

将新密钥附加到tasks_list 的innerHTML 会使您在要删除项目时很难获得密钥。相反，将每个新任务设为  元素（或无序列表元素）并将新元素作为子元素附加到 tasks_list 会更容易，就像这样-

for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  const newTask = document.createElement('p') //create a new html element
  newTask.classList.add('task') //add a class of "task" to it
  newTask.innerHTML = key //set the innerHTML to equal the key
  task_list.appendChild(newTask) //add the newTask element as a child element of task_list
}

您可以使用task 类为每个元素添加事件侦听器，方法是遍历每个元素并添加您的事件侦听器。这里的好处是，当您想要单个任务的密钥时，您只需抓住 innerHTML 并使用它-

for(let i = 0; i < tasks.length; i++) {
    tasks[i].addEventListener("click", () => {
        const key = tasks[i].innerHTML
        window.localStorage.removeItem(key)
        location.reload()
    })
}

您当前通过循环通过localStorage 删除项目的方式实际上是在每次通过循环时删除一个元素，而不是检查它正在删除的项目是否是被点击的项目。

编辑-a。 mola 的回答与我的类似，但您不需要遍历整个本地存储来查找匹配的密钥。这就是拥有键/值对的美妙之处！只要您知道密钥，您就可以操作数据，而无需先通过循环搜索。

【讨论】：

完美！谢谢安德鲁

【解决方案2】：

所以我认为问题在于您没有检查要删除的特定待办事项，而是将它们全部删除

for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i);
   // I it would be better if you wrapped each key in its own element
    task_list.innerHTML += `<div>${key}</div>`; // I'm using a `div` so there'll be no need for a `<br/>` tag
}   

task_list.onclick = function(e) {
    // I want to use the event data to find out exactly which localStorage key to delete
    for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
        // Here i'm checking if the key is the same as the todo that you want to delete
        if (key == e.target.innerText) {
            localStorage.removeItem(key); // Removing the todo from storage
            e.target.remove(); // Removing the todo element from the DOM
        }
    } 
}

【讨论】：