INTCSS: Web Storage

📚 Sommaire du chapitre 8

📖 Introduction 💾 Local Storage ⏱️ Session Storage 🛠️ Méthodes principales 📦 Stocker des objets 🗑️ Supprimer des données 📡 Événements storage 📝 Exemples complets 🔒 Sécurité et limites

📖 1. Introduction au Web Storage

Le Web Storage permet de stocker des données localement dans le navigateur, de manière plus performante et avec une plus grande capacité que les cookies.

❌ Cookies

4 KB maximum
Envoyés à chaque requête HTTP
Expiration configurable
Accessibles côté serveur

✅ Web Storage

5-10 MB maximum
Non envoyés au serveur
Persistant jusqu'à effacement
Accessible uniquement côté client

⚡

Performance

Pas de transmission réseau

💾

Capacité

Jusqu'à 10 Mo

🔧

API simple

setItem, getItem, removeItem

🔒

Sécurité

Same-origin policy

💾 2. Local Storage

localStorage stocke des données persistantes qui restent même après la fermeture du navigateur.

📌 Caractéristiques

Persiste après redémarrage du navigateur
Partagé entre tous les onglets du même domaine
Capacité : 5-10 Mo (selon navigateur)
Stockage sous forme de paires clé/valeur (string uniquement)

// Stocker des données
localStorage.setItem('username', 'JeanDupont');
localStorage.setItem('theme', 'dark');
localStorage.setItem('language', 'fr');

// Récupérer des données
const username = localStorage.getItem('username');
console.log(username); // 'JeanDupont'

📝 Démo : localStorage

✨ Testez localStorage

⏱️ 3. Session Storage

sessionStorage stocke des données temporaires qui sont effacées à la fermeture de l'onglet.

📌 Caractéristiques

Effacé à la fermeture de l'onglet ou du navigateur
Unique par onglet (non partagé entre onglets)
Capacité : 5-10 Mo (selon navigateur)
Idéal pour les données temporaires

// Stocker des données temporaires
sessionStorage.setItem('panier', JSON.stringify(['produit1', 'produit2']));
sessionStorage.setItem('formData', JSON.stringify({nom: 'Jean', email: 'jean@email.com'}));

// Récupérer des données
const panier = JSON.parse(sessionStorage.getItem('panier'));

📝 Démo : sessionStorage

✨ Testez sessionStorage

🛠️ 4. Méthodes principales

`setItem(key, value)`

Stocke une valeur sous une clé

localStorage.setItem('nom', 'Jean');

`getItem(key)`

Récupère la valeur associée à une clé

const nom = localStorage.getItem('nom');

`removeItem(key)`

Supprime l'élément avec la clé spécifiée

localStorage.removeItem('nom');

`clear()`

Supprime tous les éléments

localStorage.clear();

`key(index)`

Retourne la clé à l'index donné

const key = localStorage.key(0);

`length`

Nombre d'éléments stockés

const count = localStorage.length;

📦 5. Stocker des objets (JSON)

Le Web Storage ne stocke que des chaînes de caractères. Pour stocker des objets, utilisez JSON.stringify() et JSON.parse().

// Stocker un objet
const user = {
    id: 1,
    nom: 'Jean Dupont',
    email: 'jean@email.com',
    age: 25,
    preferences: { theme: 'dark', notifications: true }
};

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

// Récupérer l'objet
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.nom); // 'Jean Dupont'
console.log(storedUser.preferences.theme); // 'dark'

📝 Démo : Stockage d'objets

✨ Stocker un objet utilisateur

🗑️ 6. Supprimer des données

// Supprimer un élément spécifique
localStorage.removeItem('username');

// Supprimer TOUS les éléments
localStorage.clear();

// Vérifier la taille
console.log(`Nombre d'éléments : ${localStorage.length}`);

📝 Démo : Suppression

✨ Gestion des données

📡 7. Événements storage

L'événement storage est déclenché lorsqu'une modification est faite dans le localStorage (dans un autre onglet).

window.addEventListener('storage', function(event) {
    console.log('Clé modifiée :', event.key);
    console.log('Ancienne valeur :', event.oldValue);
    console.log('Nouvelle valeur :', event.newValue);
    console.log('Domaine :', event.url);
});

💡 Note : L'événement n'est pas déclenché dans l'onglet qui effectue la modification, seulement dans les autres onglets du même domaine.

📝 8. Exemples complets

📌 Exemple 1 : Thème personnalisé persistant

<select id="theme">
    <option value="clair">Clair</option>
    <option value="sombre">Sombre</option>
</select>

<script>
    const savedTheme = localStorage.getItem('theme') || 'clair';
    document.getElementById('theme').value = savedTheme;
    applyTheme(savedTheme);

    document.getElementById('theme').addEventListener('change', (e) => {
        localStorage.setItem('theme', e.target.value);
        applyTheme(e.target.value);
    });
</script>

✨ Démo : Thème persistant

Choisissez un thème :

Ce texte change selon votre thème !

📌 Exemple 2 : Liste de tâches (To-Do List)

let tasks = JSON.parse(localStorage.getItem('tasks')) || [];

function addTask(task) {
    tasks.push({ id: Date.now(), text: task, done: false });
    localStorage.setItem('tasks', JSON.stringify(tasks));
    renderTasks();
}

function toggleTask(id) {
    const task = tasks.find(t => t.id === id);
    task.done = !task.done;
    localStorage.setItem('tasks', JSON.stringify(tasks));
    renderTasks();
}

✨ Démo : To-Do List persistante

📌 Exemple 3 : Formulaire avec sauvegarde automatique

const textarea = document.getElementById('note');
textarea.value = localStorage.getItem('note') || '';
textarea.addEventListener('input', () => {
    localStorage.setItem('note', textarea.value);
});

✨ Démo : Sauvegarde automatique

🔒 9. Sécurité et limites

📌 Limites de stockage

Chrome : 10 Mo
Firefox : 10 Mo
Safari : 5 Mo
Edge : 10 Mo

📌 Bonnes pratiques

Ne stockez jamais d'informations sensibles (mots de passe, données bancaires)
Utilisez try...catch pour gérer les erreurs de quota
Évitez de stocker de très gros volumes de données
Nettoyez régulièrement les données obsolètes

// Gestion des erreurs de quota
try {
    localStorage.setItem('data', largeData);
} catch (e) {
    if (e.code === 22 || e.name === 'QuotaExceededError') {
        console.log('Quota dépassé !');
    }
}

⚠️ Attention : Les données du Web Storage ne sont pas cryptées. Ne stockez jamais d'informations confidentielles.

📝 Tableau récapitulatif

Caractéristique	localStorage	sessionStorage
Persistance	✔️ Persiste après fermeture	❌ Effacé à la fermeture
Partage entre onglets	✔️ Oui	❌ Non (unique par onglet)
Capacité	5-10 Mo (selon navigateur)
API	setItem, getItem, removeItem, clear, key, length

📌 Quiz de vérification

Question 1 : Quelle est la différence entre localStorage et sessionStorage ?

✅ Réponse

localStorage persiste après fermeture du navigateur, sessionStorage est effacé à la fermeture de l'onglet.

Question 2 : Comment stocker un objet JavaScript dans localStorage ?

✅ Réponse

localStorage.setItem('key', JSON.stringify(objet)); puis JSON.parse(localStorage.getItem('key')) pour le récupérer.

Question 3 : Quelle méthode permet de supprimer TOUTES les données ?

✅ Réponse

localStorage.clear() ou sessionStorage.clear()

Question 4 : Quelle est la capacité maximale typique de localStorage ?

✅ Réponse

Entre 5 et 10 Mo selon le navigateur.