8.0 Sauvegarde et récupération des articles avec localStorage

Objectif :

L’objectif est de sauvegarder les articles ajoutés à la liste dans le localStorage, afin qu’ils persistent même après le rechargement de la page. Ensuite, on va récupérer ces articles lors du chargement de la page pour qu’ils apparaissent dans la liste, même après une déconnexion ou un rechargement.

On va utiliser :

• localStorage.setItem(key, value) -> Sauvegarde les articles dans le navigateur. > tu peux voir la doc officielle ici • localStorage.getItem(key) -> Récupère les articles sauvegardés dans le localStorage. > tu peux voir la doc officielle ici • JSON.stringify() -> Convertit un tableau en une chaîne de caractères pour qu’il puisse être stocké dans le localStorage. > tu peux voir la doc officielle ici • JSON.parse() -> Convertit une chaîne récupérée depuis le localStorage en un tableau utilisable. > tu peux voir la doc officielle ici

Étapes :

1. Sauvegarder la liste dans le localStorage à chaque modification.
2. Récupérer la liste depuis le localStorage lors du chargement de la page
3. Afficher les articles récupérés
4. Mettre à jour le localStorage à chaque modification (ajout, suppression ou edition)
5. Mettre à jour le localStorage à la suppression complète de la liste

Concrètement :

1. Sauvegarder la liste dans le localStorage à chaque modification

À chaque fois qu’un utilisateur ajoute, supprime, ou modifie un article, on doit mettre à jour la liste dans le localStorage.

Code pour sauvegarder la liste :

    localStorage.setItem('shoppingList', JSON.stringify(shoppingList));

2. Récupérer la liste depuis le localStorage lors du chargement de la page

Lorsque la page est chargée, on va récupérer les articles qui ont été sauvegardés dans le localStorage et les ré-afficher dans la liste. Code pour récupérer la liste :

    const storedList = localStorage.getItem('shoppingList');
    if (storedList) {
        shoppingList = JSON.parse(storedList);
    }

3. Afficher les articles récupérés

Une fois les articles récupérés depuis le localStorage, on va les afficher dans la liste HTML de la page. Pour cela, on va utiliser une boucle qui parcourt chaque article et le réinsère dans le DOM.

Pour cela, on va créer une fonction initShoppingList() qui :

• Récupère les articles depuis le localStorage
• Utilise une boucle pour réinsérer chaque article dans la liste HTML

function initShoppingList() {
    const storedList = localStorage.getItem('shoppingList');
    if (storedList) {
        shoppingList = JSON.parse(storedList);
        shoppingList.forEach((item, index) => {
            displayItem(index, item); // Fonction qui affiche chaque article dans la liste
        });
    }
}

4. Mettre à jour le localStorage à chaque modification

À chaque fois qu’un article est ajouté, supprimé ou modifié, on doit mettre à jour le localStorage avec la liste actuelle.

Cela se fait dans les fonctions où l’on ajoute, modifie ou supprime un article.

Exemples de mise à jour du localStorage :

• Après un ajout d’article :

  shoppingList.push(newItem); // Ajouter l'article dans le tableau
  localStorage.setItem('shoppingList', JSON.stringify(shoppingList)); // Sauvegarder dans le localStorage

• Après une suppression d’article :

  shoppingList.splice(indexToDelete, 1); // Supprimer l'article
  localStorage.setItem('shoppingList', JSON.stringify(shoppingList)); // Mettre à jour le localStorage

• Après une modification d’article :

  shoppingList[index] = updatedItem; // Mettre à jour l'article dans le tableau
  localStorage.setItem('shoppingList', JSON.stringify(shoppingList)); // Sauvegarder les modifications

5. Effacer la liste et mettre à jour le localStorage

Lorsque l’utilisateur souhaite effacer toute la liste, on doit également vider le localStorage pour que la liste ne réapparaisse pas au prochain chargement de la page.

Code pour effacer la liste :

function clearShoppingList() {
    shoppingList = []; // Vider le tableau
    localStorage.setItem('shoppingList', JSON.stringify(shoppingList)); // Sauvegarder la liste vide
    itemList.innerHTML = ''; // Effacer visuellement la liste
}

Résumé final :

1. Sauvegarde dans localStorage : Utilise localStorage.setItem() à chaque ajout, suppression ou modification d’article.
2. Récupération depuis localStorage : Utilise localStorage.getItem() pour charger les articles à chaque chargement de la page.
3. Affichage des articles récupérés : Utilise une fonction comme initShoppingList() pour parcourir la liste et réinsérer chaque article dans le DOM.
4. Mise à jour du localStorage à chaque modification : Assure que chaque modification d’article met également à jour le localStorage.
5. Effacement complet de la liste : Lorsque la liste est effacée, vide également le localStorage pour qu’il ne reste aucune trace des articles.