1
votes

Supprimer l'élément du stockage local

J'essaie de supprimer un élément du stockage local. Cela fonctionne, sauf qu'il supprime parfois plus d'un élément.

J'ai essayé array.splice de supprimer le stockage local puis de le réinitialiser avec les nouvelles valeurs et je n'ai pas trouvé de moyen de le réparer, je suis sûr que c'est quelque chose de simple.

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

Tout ce que je veux, c'est supprimer l'élément qui correspond à l'élément en cours de suppression de l'interface utilisateur. Quand je supprime, disons l'index 1, cela supprime tous les autres index.

Il s'agit essentiellement du projet Brad Traversy sur la manipulation du DOM. J'essaye de travailler davantage avec le stockage local pour d'autres projets.

javascript local-storage splice array-splice

3 commentaires

Vous ne dites pas à removeLocalStorage quel élément supprimer. Il s'agit simplement de supprimer tous les autres éléments.

Comment les éléments de l'interface utilisateur sont-ils liés aux éléments du tableau?

Veuillez ajouter la fonction showItems. Veuillez également consulter: stackoverflow.com/help/minimal-reproducible-example

3 Réponses :

0
votes

Avez-vous essayé la ligne?:

 window.localStorage.removeItem('itemsArray');

Cette ligne supprimera uniquement l'élément avec une clé spécifique dans le stockage local.

2 commentaires

Je pense qu'il veut simplement supprimer un élément du tableau qui y est stocké, pas supprimer le tableau entier.

J'ai essayé cela, cela fonctionnait essentiellement, mais lorsque j'ai actualisé la page, les éléments étaient de retour dans le stockage local. Peut-être a-t-il été un problème avec le stockage local lors du chargement de la page.

1
votes

Vous devez transmettre l'index de l'élément que vous souhaitez supprimer à la fonction removeLocalStorage . Voir le code ci-dessous:

//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));
}

2 commentaires

Oui, cela a fait l'affaire. J'ai pensé que c'était quelque chose de simple qui me manquait. Merci beaucoup!

Heureux d'avoir pu aider. Si le problème est complètement résolu, pourriez-vous marquer la réponse comme acceptée? Merci.

0
votes

Il me semble qu'avec la boucle vous supprimez tout le tableau. Vous devez passer un identifiant pour removeFromLocalStorage (). Là, vous devez savoir quel élément vous souhaitez supprimer. La boucle n'a de sens pour moi que si vous souhaitez découvrir l'index d'un élément particulier avec une propriété. Par exemple:

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

0 commentaires