Comment crééer une nouvelle clé pour le local storage

Fermé
VeLxr Messages postés 3 Date d'inscription vendredi 21 mai 2021 Statut Membre Dernière intervention 21 mai 2021 - Modifié le 21 mai 2021 à 19:20
VeLxr Messages postés 3 Date d'inscription vendredi 21 mai 2021 Statut Membre Dernière intervention 21 mai 2021 - 21 mai 2021 à 23:52
Bonjour,

Je débute en javascript... je coince sur un exercice que je dois faire. Il faut crééer une mini app qui ajoute des item sur la page ET dans le local storage, pour ensuite soit enlever un par un en commencant par le dernier, soit en effacant tout, yc dans local storage. Mais je n'arrive pas a créer une nouvelle clé pour chaque entrée. Voici ce que j'ai déja écrit:

```js
const textBox= document.getElementById("textBox") ;
const addItemButton=document.getElementById("addItemButton");
const removeButton=document.getElementById("removeButton");
const clearButton = document.getElementById("clearButton");
const content = document.getElementById("content");


function addItem(){
    const newItem = document.createElement("p");
    newItem.innerText = textBox.value;
    newItem.className="para"
    content.appendChild(newItem);
    document.getElementById("textBox").value = "";
    localStorage.setItem("item", textBox.value)
    // addToLocal();
    
}
addItemButton.addEventListener("click",addItem);
// addToLocal();


function removeLastItem(){
    const notes=document.getElementsByClassName("para");
    if (notes.length > 0){
        const lastPos = notes.length-1;
        content.removeChild(notes[lastPos]);
    }
}
removeButton.addEventListener("click", removeLastItem);


function clearAll(){
    const notes=document.getElementsByClassName("para");
    if (notes.length ==0){
        console.log("There is nothing to remove");
    }while (notes.length >0){
        const lastPos = notes.length-1;
        content.removeChild(notes[lastPos]);  
    }
}
clearButton.addEventListener("click", clearAll);
```
Jusqu'ici, tout va bien.. mais local.storage, pas du tout.. J'ai fait un essai:

```js
function addToLocal(){
    const notes=document.getElementsByClassName("para")
    for (i = 0; i < notes.length ; i=i+1) {
    const key = notes[i];
    const keys = key + i;
    //localStorage.setItem(keys, notes)
    console.log(keys, notes);
       }
    }

```

EDIT : Ajout des balises de code

Mais je ne vois pas trop.. vous arrivez à m'aider? JSON interdit!! Merci!
A voir également:

2 réponses

jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
21 mai 2021 à 19:31
Bonjour,

Déjà, à l'avenir, merci d'utiliser les balises de code pour poster du code sur le forum
Explications à lire entièrement, disponibles ici: https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code


que donne ceci :
function addToLocal(){
    let notes=document.getElementsByClassName("para")
    for (i = 0; i < notes.length ; i=i+1) {
       let key = notes[i];
       localStorage.setItem('note'+i, notes);
       console.log('note'+i, notes);
       }
    }


au passage, tu remarqueras que je n'ai pas utilisé de "const" ..... const c'est pour des CONSTANTES.
Pour les variables, il faut utiliser LET ou VAR selon ton besoin. ( tu trouveras sur le net les explications concernant leur utilisation... la portée des variables... )

1
VeLxr Messages postés 3 Date d'inscription vendredi 21 mai 2021 Statut Membre Dernière intervention 21 mai 2021
21 mai 2021 à 23:52
Bonsoir! Merci!
J'ai répondu à la question au lieu de commenter ta réponse, j'ai les yeux qui se croisent, a priori...
Merci pour le code. Mais le problème est que cela n'affiche pas la valeur, donc impossible de recharger la page avec. Je n'ai pas encore trouvé comment faire. Merci, et encore désolée pour les balises
0
VeLxr Messages postés 3 Date d'inscription vendredi 21 mai 2021 Statut Membre Dernière intervention 21 mai 2021
21 mai 2021 à 20:47
Bonsoir!!

Merci beaucoup! Et désolée pour les balises, j'ai mal cherché.. je garde précieusement le lien! C'est vraiment sympa.
Tout n'est pas encore très clair concernant quand utiliser les variables... je vais y travailler! Merci encore, bonne soirée
0