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

Champ d'application : Les cookies sont accessibles côté client et côté serveur. sessionStorage et localStorage sont uniquement accessibles côté client.

Durée de vie : Pour les cookies, la durée est définie lors de leur création (avec l'attribut expires ou max-age). Si non spécifié, le cookie est supprimé à la fermeture du navigateur. sessionStorage ne conserve les données que pendant la session en cours (jusqu'à la fermeture de l'onglet ou de la fenêtre). localStorage conserve les données indéfiniment, jusqu'à leur suppression explicite.

Taille : La taille maximale pour les cookies est d'environ 4 Ko. Pour sessionStorage et localStorage, de 5 Mo à 10 Mo, selon le navigateur.

Envoi avec chaque requête : Les cookies sont automatiquement envoyés avec chaque requête HTTP au domaine pour lequel ils sont définis, ce qui peut augmenter le trafic. Les données dans sessionStorage et localStorage ne sont pas envoyées au serveur.

Mode d'accès : L'accès aux cookies se fait via document.cookie (chaîne). L'accès à sessionStorage et localStorage se fait via les objets correspondants en utilisant les méthodes setItem, getItem, removeItem et clear.

// Définir un cookie
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

// Obtenir un cookie
let x = document.cookie;

// Définir des données dans sessionStorage
sessionStorage.setItem("lastname", "Smith");

// Obtenir des données de sessionStorage
let y = sessionStorage.getItem("lastname");

// Définir des données dans localStorage
localStorage.setItem("firstname", "Jane");

// Obtenir des données de localStorage
let z = localStorage.getItem("firstname");

Fonctionnalité	cookies	sessionStorage	localStorage
Champ d'application	Client et Serveur	Client uniquement	Client uniquement
Durée de vie	Définie lors de la création (expires/max-age), sinon jusqu'à la fermeture du navigateur	Jusqu'à la fermeture de l'onglet ou de la fenêtre	Indéfinie (jusqu'à suppression explicite)
Taille	~4 Ko	~5-10 Mo (selon le navigateur)	~5-10 Mo (selon le navigateur)
Envoi avec la requête	Oui	Non	Non
Accès	document.cookie	sessionStorage.getItem/setItem	localStorage.getItem/setItem