L'API Web Storage offre un mécanisme permettant aux navigateurs de conserver des paires clé-valeur de manière sécurisée, surpassant les cookies en termes de simplicité et d'efficacité.

Concepts fondamentaux

Le stockage Web se divise en deux variantes principales. D'une part, sessionStorage maintient un espace dédié pour chaque origine, accessible uniquement durant la session de la page (tant que le navigateur reste ouvert, même après des rechargements). D'autre part, localStorage assure une persistance similaire, mais les données survivent à la fermeture et à la réouverture du navigateur.

Ces mécanismes s'exploitent via les propriétés Window.sessionStorage et Window.localStorage. Chaque appel retourne un objet Storage distinct, permettant de manipuler des éléments de données de manière indépendante pour chaque origine.

Fonctionnement de localStorage

La propriété en lecture seule localStorage donne accès à un objet de stockage lié à l'origine du document. Contrairement à sessionStorage, les données persistantes dans localStorage demeurent disponibles indéfiniment, sauf suppression explicite. Notez que les paires clé-valeur sont toujours stockées sous forme de chaînes de caractères, avec une conversion automatique des types numériques.

Exemples d'opérations courantes :

// Ajouter un élément au stockage
localStorage.setItem('utilisateur', 'Alice');

// Récupérer un élément stocké
let nom = localStorage.getItem('utilisateur');

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

// Effacer toutes les données du stockage
localStorage.clear();

Utilisation de sessionStorage

L'attribut sessionStorage fournit un accès à un espace de stockage temporaire, effacé automatiquement à la fin de la session de la page (fermeture de l'onglet ou de la fenêtre). Les sesions sont indépendantes par onglet, avec duplication du contexte lors de l'ouverture de nouvelles instances, contrairement aux cookies de session.

Voici comment interagir avec sessionStorage :

// Enregistrer une valeur dans la session courante
sessionStorage.setItem('panier', 'produit1');

// Lire une valeur depuis la session
let article = sessionStorage.getItem('panier');

// Retirer un élément de la session
sessionStorage.removeItem('panier');

// Vider complètement le stockage de session
sessionStorage.clear();