`localStorage` ou `sessionStorage`

L’API de stockage Web fournit deux espaces de stockage clé-valeur côté client : localStorage (persistant entre les sessions) et sessionStorage (effacé à la fermeture de l’onglet). Tous deux stockent des valeurs textuelles et sont accessibles de manière synchrone via JavaScript sur la même origine.

Les données de localStorage persistent jusqu’à leur effacement explicite par le code, l’utilisateur ou la suppression des données du navigateur. Elles survivent aux redémarrages du navigateur, aux actualisations de la page et aux fermetures d’onglets. La capacité est généralement de 5 à 10 MB par origine, selon le navigateur.

sessionStorage est associé à l’onglet et à la session actuels du navigateur. Les données survivent aux actualisations de la page dans le même onglet, mais sont effacées à la fermeture de celui-ci. Deux onglets ouverts sur le même site disposent de sessionStorage distincts et isolés : ils ne partagent pas leurs données.

Les deux espaces de stockage partagent la même interface de programmation : setItem(key, value), getItem(key), removeItem(key), clear() et la propriété length. Le même code fonctionne pour les deux : il suffit de remplacer localStorage par sessionStorage, et inversement.

Utilisez localStorage pour les préférences de l’utilisateur (thème, langue), les réponses d’interface de programmation mises en cache et la fonctionnalité de mémorisation de la connexion. Utilisez sessionStorage pour l’état des étapes d’un assistant ou d’un formulaire, un panier temporaire avant le paiement et les données qui ne doivent pas persister entre les visites pour des raisons de confidentialité.

Les deux espaces de stockage sont strictement associés à une origine (protocole + hôte + port). https://example.com ne peut pas lire le localStorage défini par http://example.com. Il s’agit d’une limite de sécurité : les sous-domaines correspondent également à des origines distinctes, sauf si document.domain est modifié (fonctionnalité obsolète).

Dans la plupart des navigateurs, les deux espaces disposent d’une limite d’environ 5 MB par origine. Le dépassement de cette limite déclenche une erreur QuotaExceededError. Les besoins de stockage de grandes quantités de données nécessitent IndexedDB, qui prend en charge des gigaoctets de données structurées. Le stockage Web est destiné aux petites paires clé-valeur, et non aux données binaires ni aux grands ensembles de données.

Les lectures et écritures du stockage Web sont synchrones et bloquent le thread principal. Pour les lectures ou écritures volumineuses, cela peut provoquer des saccades. Préférez IndexedDB pour les opérations fréquentes sur de grandes quantités de données. Gardez les valeurs du stockage Web petites et peu fréquentes afin d’éviter les problèmes de performances.

Le stockage Web ne conserve que des chaînes de caractères. Sérialisez les objets avec JSON.stringify() et désérialisez-les avec JSON.parse(). Gérez les échecs d’analyse : try { return JSON.parse(stored) } catch { return defaultValue }. Les valeurs endommagées ou qui ne sont pas au format JSON dans le stockage déclenchent des erreurs d’analyse.

localStorage en mode privé ou en navigation privée est effacé lorsque toutes les fenêtres privées sont fermées : il se comporte alors comme sessionStorage. Le code qui dépend de localStorage pour l’état d’authentification doit gérer le cas où localStorage est effacé de manière inattendue.

Les navigateurs restreignent de plus en plus l’accès au stockage tiers. Une iframe provenant de third-party.com et intégrée à first-party.com ne peut pas accéder au localStorage de third-party.com. L’ITP de Safari et la protection renforcée contre le pistage de Firefox cloisonnent le stockage : l’utilisation par le site d’origine n’est pas affectée.

Quand sessionStorage est-il effacé ?

localStorage persiste indéfiniment jusqu’à son effacement programmé ou effectué par l’utilisateur ; sessionStorage est effacé à la fermeture de l’onglet. Tous deux sont des espaces de stockage synchrones de chaînes clé-valeur, associés à une origine, avec une capacité d’environ 5 MB. Utilisez localStorage pour les préférences et l’état persistant ; utilisez sessionStorage pour l’état temporaire lié à la session, qui ne doit pas survivre à la fermeture de l’onglet.