Explique la différence entre cookies, sessionStorage…

Cookies, sessionStorage et localStorage sont des mécanismes de stockage web qui diffèrent par leur but, leur durée de vie et la quantité de données stockées.

Cookies : Petits fragments de données envoyés par le serveur web et stockés sur l'ordinateur de l'utilisateur par le navigateur web. Ils sont envoyés avec chaque requête suivante au même serveur. Utilisés pour l'authentification, le stockage des préférences de l'utilisateur, le suivi de l'état du panier.
- Durée de vie : Définie lors de la création (peut être de session ou avec une date d'expiration spécifique).
- Volume : Limité, généralement quelques kilo-octets (environ 4 Ko).
sessionStorage : Stocke les données uniquement pour une session du navigateur (onglet ou fenêtre ouverte). Les données sont supprimées à la fermeture de l'onglet ou de la fenêtre.
- Durée de vie : Jusqu'à la fermeture de l'onglet ou de la fenêtre du navigateur.
- Volume : Significativement plus grand que celui des cookies (généralement plusieurs mégaoctets).
localStorage : Stocke les données sans date d'expiration, jusqu'à ce qu'elles soient explicitement supprimées par l'utilisateur ou un script. Disponible dans tous les onglets et fenêtres du même domaine.
- Durée de vie : Permanente (jusqu'à suppression explicite).
- Volume : Significativement plus grand que celui des cookies (généralement plusieurs mégaoctets).

Voici une brève comparaison :

Mécanisme	Durée de vie	Disponibilité	Envoyé au serveur	Volume (typique)	Objectif
Cookies	De session ou avec expiration	Via en-têtes HTTP	Oui	~4 Ko	Authentification, suivi, préférences
sessionStorage	Jusqu'à la fermeture de l'onglet/fenêtre	Via API JS	Non	~5-10 Mo	Stockage temporaire de données de session
localStorage	Permanente (jusqu'à suppression)	Via API JS	Non	~5-10 Mo	Stockage à long terme des données

Exemples d'utilisation de l'API JavaScript :

// Cookies (accès via document.cookie, nécessite parsing et sérialisation manuels)
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

// sessionStorage
sessionStorage.setItem('id', '123');
let userId = sessionStorage.getItem('id');
sessionStorage.removeItem('id');

// localStorage
localStorage.setItem('theme', 'dark');
let userTheme = localStorage.getItem('theme');
localStorage.removeItem('theme');
localStorage.clear(); // Efface toutes les données dans localStorage

Explique la différence entre cookies, sessionStorage et localStorage.