Quelles sont les principales différences entre LocalStorage, SessionStorage et Cookies dans le stockage des données dans le navigateur?

LocalStorage, SessionStorage et Cookies sont trois méthodes de stockage de données dans le navigateur, mais elles diffèrent par leur volume, leur durée de vie et leur portée :

• LocalStorage :

  • Stocke les données sans date d'expiration, jusqu'à ce que l'utilisateur les supprime manuellement.
  • Les données sont accessibles dans tous les onglets et fenêtres d'un même domaine.
  • La capacité est généralement d'environ 5-10 Mo.
  • Ne sont pas envoyées au serveur à chaque requête.

• SessionStorage :

  • Les données ne vivent que dans le cadre d'une session (tant que l'onglet du navigateur est ouvert).
  • Les données ne sont pas accessibles dans d'autres onglets ou fenêtres.
  • La capacité est similaire à celle de LocalStorage.
  • Ne sont pas envoyées au serveur.

• Cookies :

  • Ont une capacité limitée (environ 4 Ko).
  • Peuvent avoir une durée de vie après laquelle elles sont supprimées.
  • Sont envoyées au serveur à chaque requête HTTP vers le domaine correspondant.
  • Utilisées pour l'authentification, le suivi des sessions, etc.

Exemple d'utilisation de LocalStorage :

// Enregistrer des données
localStorage.setItem('username', 'user123');

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