sessionStorage, IndexedDB et choix de la bonne API

sessionStorage expose exactement les mêmes méthodes que localStorage, mais sa durée de vie est liée à l'onglet. Lorsque l'onglet ou la fenêtre est fermé, ses données sont automatiquement supprimées.

Il est également isolé par onglet : deux onglets ne partagent donc pas leurs données sessionStorage.

sessionStorage est particulièrement adapté à un assistant en plusieurs étapes lorsque vous souhaitez conserver la progression après les rechargements pendant la session, puis la supprimer à la fermeture de l'onglet.

L'utilisateur peut actualiser la page au milieu du formulaire sans perdre ses saisies, mais rien ne subsiste après la fin ou l'abandon du formulaire.

IndexedDB est une base de données asynchrone et transactionnelle intégrée au navigateur. Elle peut stocker bien plus que la limite de 5 Mo de localStorage et gérer des objets structurés, des tableaux et même des données binaires.

Comme elle est asynchrone, elle ne bloque pas le fil d'exécution principal contrairement à localStorage.

L'interface IndexedDB native est verbeuse et fondée sur les événements ; des bibliothèques comme idb-keyval l'enveloppent dans des fonctions simples fondées sur les promesses, telles que get, set et del.

Vous bénéficiez ainsi d'une ergonomie similaire à localStorage, avec la capacité et le comportement asynchrone d'IndexedDB.

Comme IndexedDB peut stocker des valeurs Blob et ArrayBuffer, il est idéal pour mettre en cache des images, de l'audio, des fichiers téléchargés ou des ressources hors ligne.

Ces données dépasseraient rapidement les limites de localStorage et devraient être converties en chaînes, ce qu'IndexedDB permet d'éviter.

L'interface Cache, souvent utilisée avec des agents de service, stocke des objets Response HTTP entiers associés à une requête. Elle est conçue spécifiquement pour la mise en cache prioritaire hors ligne des réponses réseau.

Utilisez-la pour fournir des ressources et des réponses d'interface de programmation sans solliciter le réseau lorsque vous êtes hors ligne.

localStorage persiste de façon permanente jusqu'à sa suppression, sessionStorage dure uniquement pendant la session de l'onglet, IndexedDB persiste de façon permanente et les cookies ont une durée d'expiration configurable via leurs attributs.

Adapter la durée de conservation souhaitée au bon stockage évite les surprises concernant la disparition des données.

localStorage et sessionStorage sont limités à environ 5 Mo, les cookies à environ 4 Ko chacun, tandis qu’IndexedDB peut utiliser des centaines de mégaoctets ou davantage selon l’appareil et le navigateur.

Pour toute donnée volumineuse, IndexedDB est la seule option pratique dans le navigateur.

localStorage, sessionStorage et les cookies sont synchrones et bloquent le thread principal lors de l’accès. IndexedDB et l’API Cache sont asynchrones et fondés sur des promesses.

L’accès asynchrone maintient l’interface réactive, même lors de la lecture ou de l’écriture de grandes quantités de données.

Utilisez les cookies httpOnly pour les jetons d’authentification afin que les scripts ne puissent pas les lire, localStorage pour les petites préférences persistantes, IndexedDB pour les fichiers volumineux et les données hors ligne complexes, et sessionStorage pour les brouillons à courte durée de vie dans un onglet.

Adaptez le stockage à la sensibilité, à la taille et à la durée de vie des données.

Il n’existe pas d’API de stockage universellement meilleure ; chacune offre un compromis entre capacité, persistance, comportement de synchronisation et sécurité. Connaître leurs différences vous permet de choisir en connaissance de cause.

Une application classique en utilise plusieurs : les cookies pour l’authentification, localStorage pour les préférences et IndexedDB pour les ressources hors ligne.

Vous avez comparé sessionStorage, localStorage, IndexedDB, les cookies et l’API Cache en matière de persistance, de capacité, de comportement de synchronisation et de sécurité.

Vous avez appris à choisir selon le cas d’utilisation : les cookies pour l’authentification, localStorage pour les petites préférences, IndexedDB pour les données volumineuses ou complexes, et sessionStorage pour les brouillons limités à un onglet.