Leçon 6 : Listes dynamiques (DOM + localStorage)

Objectif de la leçon

Dans cette leçon, vous allez créer une liste d’éléments. Vous pourrez :

• ajouter un élément (DOM)
• afficher la liste (boucles)
• supprimer un élément
• enregistrer la liste dans le navigateur (localStorage)

1) Rappels : DOM (manipuler la page)

Pour rendre une page interactive, on modifie des éléments HTML via JavaScript. Ici, on va créer des éléments <li>, les ajouter à une liste, et mettre à jour l’affichage.

2) Ajouter un élément + boucle

Quand vous ajoutez un texte, on le stocke dans un tableau JavaScript, puis on “re-dessine” la liste à l’écran avec une boucle.

3) Code complet à essayer

Votre liste

Mini-résumé

• On utilise un tableau JavaScript (items) comme “source de vérité”.
• On affiche la liste en reconstruisant le DOM avec forEach.
• On enregistre dans localStorage pour garder les données même après recharge de la page.