从本地存储中删除项目

Question

我正在尝试从本地存储中删除一个项目。 它的工作原理是偶尔删除多个项目。

我试过 array.splice 删除本地存储，然后用新值重置它，但还没有找到修复它的方法，我相信这很简单。

    let itemsArray = JSON.parse(localStorage.getItem("itemsArray")) || [];

    //Initialize Function
    window.addEventListener("load", () => showItems(itemsArray));

    //Add event listener for the form submit
    myForm.addEventListener("submit", onSubmit);

    //Add event listener for the click event on the delete button
    itemList.addEventListener("click", removeItem);

    function showItems(itemsArray) {
        itemList.innerHTML = itemsArray.join("");
    }

    //Place the input into to list of items
    function onSubmit(e) {
      //Prevent the form submission
      e.preventDefault();

        //Create li element for the DOM
        li = document.createElement("li");

        //Place input value into li
        li.appendChild(document.createTextNode(`${item.value}`));

        //Create the delete button and place it to the right of input value
        const btnDelete = document.createElement("button");
        btnDelete.classList.add("btnDelete");
        btnDelete.appendChild(document.createTextNode("X"));
        li.appendChild(btnDelete);
        itemList.appendChild(li);
        itemsArray.push(li.outerHTML);
        localStorage.setItem("itemsArray", JSON.stringify(itemsArray));

        //Reset input value to empty
        item.value = "";
    }

    //Delete item
    function removeItem(e) {
      if (e.target.classList.contains("btnDelete")) {
        if (confirm("Are You Sure You Want To Delete This Item?")) {
          removeLocalStorage();
          let li = e.target.parentElement;
          itemList.removeChild(li);
        }
      }
    }

    function removeLocalStorage(){
      let store = JSON.parse(localStorage.getItem("itemsArray")) || [];
      for(let i = 0; i < store.length; i++){
        store.splice(i, 1);
        localStorage.setItem('itemsArray', JSON.stringify(store));
      }
    }

我想要的只是删除与从 UI 中删除的项目相对应的项目。 当我删除索引 1 时，它会删除所有其他索引。

这本质上是关于 DOM 操作的 Brad Traversy 项目。 我正在尝试为其他项目更多地使用本地存储。

Answer 1

您需要将要删除的项目的索引传递给removeLocalStorage函数。 见下面的代码：

//Delete item
function removeItem(e) {
  if (e.target.classList.contains("btnDelete")) {
    if (confirm("Are You Sure You Want To Delete This Item?")) {
      let li = e.target.parentElement;
      let index = Array.prototype.indexOf.call(itemList.children, li);
      removeLocalStorage(index);
      itemList.removeChild(li);
    }
  }
}

function removeLocalStorage(index){
  let store = JSON.parse(localStorage.getItem("itemsArray")) || [];
  store.splice(index, 1);
  localStorage.setItem('itemsArray', JSON.stringify(store));
}

Answer 2

你试过这条线吗？：

 window.localStorage.removeItem('itemsArray');

此行将仅删除本地存储中具有特定键的项目。

Answer 3

在我看来，通过循环，您正在删除整个数组。 您必须将标识符传递给 removeFromLocalStorage()。 在那里，您必须知道要删除的元素。 如果您想发现具有某些属性的特定元素的索引，则循环仅对我有意义。 例如：

    ...
          if (
        confirm("Are You Sure You Want To Delete This Item?")
        ) { 
        removeLocalStorage(e.target.id); 
        let li = e.target.parentElement; itemList.removeChild(li); 
}



removeFromLocalStorage(identifier){
        ...
        let id 
        store.forEach((el,index)=> {
            id = el.identifier === identifier && index
        }).
        store.splice(id,1)
        localStorage.setItem('itemArray', JSON.stringify(store))
    ....
    }