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))
    ....
    }

从本地存储中删除项目

3 个答案: