HTML Web Storage API : Méthodes pour stocker et utiliser des données

Bonjour, cher amoureux du code ! 👋
Aujourd’hui, nous allons ouvrir le trésor caché du navigateur : l’API Web Storage. Cela signifie une manière moderne et rapide de stocker des données et de les récupérer quand on veut ! 🗝️

Autrefois, nous nous débrouillions avec les cookies, mais maintenant, la vie est bien plus facile avec localStorage et sessionStorage. Nous allons apprendre à stocker des données à long terme et à court terme. Mais d’abord, faisons leur connaissance :

1️⃣ Qu’est-ce que le Web Storage, mon amour ? 💌

Le Web Storage est comme un mini coffre-fort à l’intérieur de votre navigateur pour stocker des données.

• localStorage → Les données persistent même si vous fermez le navigateur.
• sessionStorage → Les données disparaissent lorsque vous fermez l’onglet ou le navigateur.

💡 Astuce : Si vous voulez stocker quelque chose de façon permanente, utilisez localStorage ; si vous voulez un stockage temporaire, utilisez sessionStorage. Simple, non ? 😎

2️⃣ Méthodes principales du Web Storage 🔧

💡 Note : Toutes les données sont stockées sous forme de chaînes de caractères. Si vous voulez stocker un objet, utilisez JSON.stringify.

3️⃣ Exemples pratiques 💻

A) Stockage et récupération simple

<script>
  // Stocker des données dans localStorage
  localStorage.setItem("nom", "Cansu");
  
  // Récupérer les données
  let nom = localStorage.getItem("nom");
  console.log("Nom dans LocalStorage :", nom);
</script>

🎯 Explication : Le navigateur se souviendra désormais de “Cansu” même si vous le fermez. Magique ! ✨

B) Stocker des objets

<script>
  let utilisateur = {
    nom: "Cansu",
    age: 25,
    profession: "Blogueuse"
  };

  // Utiliser stringify pour stocker des objets
  localStorage.setItem("utilisateur", JSON.stringify(utilisateur));

  // Utiliser parse pour récupérer
  let data = JSON.parse(localStorage.getItem("utilisateur"));
  console.log(data.nom); // Cansu
  console.log(data.age); // 25
</script>

💡 Astuce : JSON.stringify et JSON.parse sont des sauveurs. Utilisez-les toujours pour les objets ! 😎

C) Stockage temporaire avec Session Storage

<script>
  sessionStorage.setItem("temp", "Ces données disparaissent lorsque l’onglet est fermé !");
  console.log(sessionStorage.getItem("temp"));
</script>

🌀 Actualiser la page garde les données, mais fermer l’onglet ou le navigateur les fait disparaître. Parfait pour un stockage temporaire !

D) Supprimer des données

<script>
  // Supprimer un élément
  localStorage.removeItem("nom");

  // Supprimer toutes les données
  sessionStorage.clear();
</script>

💣 Attention : Une fois supprimées, les données disparaissent pour toujours ! 😂

4️⃣ Exemples amusants de Web Storage 🎮

Sauvegarder des scores de jeu

<script>
  function sauvegarderScore(score) {
    let scoreMax = localStorage.getItem("scoreMax") || 0;
    if(score > scoreMax) {
      localStorage.setItem("scoreMax", score);
      console.log("Nouveau record ! 🎉 Score :", score);
    } else {
      console.log("Pas de nouveau record. Score max :", scoreMax);
    }
  }

  sauvegarderScore(50); // Test d’un nouveau score
</script>

🏆 Explication : Si vous créez un jeu, vous pouvez stocker les scores dans localStorage. Les meilleurs scores ne disparaissent jamais !

Stocker les préférences utilisateur

<script>
  // Sélection du thème
  function changerTheme(theme) {
    localStorage.setItem("theme", theme);
    document.body.style.backgroundColor = theme;
    console.log("Thème changé :", theme);
  }

  // Appliquer le thème au chargement de la page
  window.onload = function() {
    let themeSauvegardé = localStorage.getItem("theme");
    if(themeSauvegardé) {
      document.body.style.backgroundColor = themeSauvegardé;
    }
  }
</script>

💡 Maintenant, le thème préféré de l’utilisateur reste le même à chaque visite. Utilisateur heureux, vous heureux ! 😍

5️⃣ Web Storage vs Cookies 🍪

• Cookies : Petites données (~4KB), envoyées à chaque requête au serveur.
• Web Storage : Données plus grandes (~5MB), stockées uniquement dans le navigateur, rapide et simple !

💡 Astuce : Utilisez Web Storage pour les données spécifiques au navigateur et les cookies pour les besoins côté serveur.

6️⃣ Conclusion : La vie facilitée avec Web Storage 🌟

• Méthode rapide, sécurisée et moderne pour stocker des données
• localStorage → Stockage persistant
• sessionStorage → Stockage temporaire
• Stocker des objets avec JSON
• Parfait pour améliorer l’expérience utilisateur

Vous êtes maintenant un héros du Web Storage en HTML ! 🦸‍♀️💖
Utilisez ce petit mais puissant trésor dans vos projets pour stocker, afficher, supprimer et gérer des données comme un pro !