Chapitre 12 : Manipulation de données et LocalStorage

Objectifs du chapitre

• Comprendre les concepts clés de Manipulation de données et LocalStorage.
• Savoir appliquer ces concepts sur un cas concret.
• Éviter les erreurs fréquentes et adopter les bonnes pratiques.

3. Utiliser l'API LocalStorage

Enregistrer une donnée

localStorage.setItem('theme', 'dark');
localStorage.setItem('utilisateur', 'Rolph');

Récupérer une donnée

let theme = localStorage.getItem('theme');
console.log(theme); // Affiche "dark"

Supprimer une donnée

localStorage.removeItem('theme');

Vider tout le stockage

localStorage.clear();

4. Stocker des objets complexes

Le LocalStorage ne peut stocker que des chaînes de caractères. Pour stocker des objets ou des tableaux, nous devons utiliser JSON.stringify() et JSON.parse().

const user = {
    nom: "Alice",
    score: 450
};

// Stockage
localStorage.setItem('user_data', JSON.stringify(user));

// Récupération
const savedUser = JSON.parse(localStorage.getItem('user_data'));
console.log(savedUser.nom); // Alice

5. SessionStorage : L'alternative temporaire

Le SessionStorage fonctionne exactement comme le LocalStorage, mais les données sont supprimées dès que l'onglet ou le navigateur est fermé.

sessionStorage.setItem('temp_id', '12345');

Exemple pratique

Essayez d'appliquer la notion vue ici dans un mini-exemple de votre projet personnel. Ensuite, comparez votre résultat avec les exercices associés pour valider votre compréhension.