Connaissances essentielles pour SPA et React - Guide complet du stockage dans le navigateur

Les frameworks côté serveur comme Django ou Spring gèrent généralement les sessions sur le serveur et identifient le client via les cookies. C'est pratique car le serveur gère l'état.

Cependant, dans un environnement SPA (Single Page Application) comme React, Vue ou Angular, le client (navigateur) joue un rôle majeur. La communication avec le serveur se fait principalement via API, tandis que l'état de l'utilisateur et les réglages UI sont souvent gérés directement par le client.

À ce stade, il est nécessaire de décider "où" stocker les données, et le navigateur propose plusieurs types de stockage. Comprendre clairement les caractéristiques et l'utilisation de chaque type de stockage est la clé d'un développement efficace en SPA.

Aujourd'hui, nous allons examiner les principaux types de stockage du navigateur : cookies, stockage local, stockage de session et IndexedDB.

1. Cookies

Les cookies sont le pionnier du stockage dans le navigateur. Ils ont été conçus à l'origine pour maintenir l'état (Stateful) entre le serveur et le client.

• Caractéristiques :

  • Taille limitée : Environ 4Ko, ce qui est très restrictif.

  • Transmission au serveur : C'est la plus grande caractéristique. Les cookies sont automatiquement inclus dans toutes les requêtes HTTP envoyées au serveur. Cela est utile lorsque le serveur a besoin de connaître l'état du client, mais cela peut aussi dégrader les performances en transmettant des données inutiles.

  • Date d'expiration : Vous pouvez définir une date et heure d'expiration via les attributs Expires ou Max-Age. S'ils ne sont pas définis, ils fonctionnent comme des cookies de session (supprimés à la fermeture du navigateur).

  • Options de sécurité : Vous pouvez configurer des options de sécurité comme HttpOnly (prévention de l'accès par JavaScript) et Secure (transmission uniquement via HTTPS).

• Usages principaux :

  • Authentification : Utilisé pour stocker les tokens d'authentification (JWT, etc.) émis par le serveur, permettant ainsi au serveur d'identifier l'utilisateur chaque fois qu'il se déplace sur les pages. (Particulièrement utilisé avec l'option HttpOnly)

  • Suivi des utilisateurs et publicité : Utilisé pour suivre l'historique de visites des utilisateurs ou les comportements. (Exemples : Google Analytics)

  • Pop-up 'Ne plus voir aujourd'hui'

2. Stockage local

Faisant partie de l'API de stockage web introduite avec HTML5, il a été conçu pour remédier aux inconvénients des cookies (petite taille, transmission automatique au serveur).

• Caractéristiques :

  • Taille supérieure : Bien que cela varie d'un navigateur à l'autre, il offre généralement une taille généreuse de 5Mo à 10Mo.

  • Non transmis au serveur : Le stockage local stocke les données uniquement sur le client et n'est pas envoyé automatiquement au serveur. C'est idéal pour stocker des données dont le serveur n'a pas besoin de connaître.

  • Durabilité : Les données sont stockées de manière permanente. Tant que l'utilisateur ne supprime pas le cache du navigateur ou n'appelle pas localStorage.removeItem(), elles ne disparaissent pas.

  • API simple : L'API est facile à utiliser avec des méthodes comme localStorage.setItem('key', 'value'), localStorage.getItem('key'). (Seules les chaînes peuvent être stockées)

• Usages principaux :

  • Stocker des réglages utilisateur : Pour enregistrer les réglages UI choisis par l'utilisateur, comme le mode sombre/clair ou la langue.

  • Stockage de données non sensibles : Pour stocker la liste des contenus récemment visualisés, les fonctionnalités d'enregistrement automatique, etc.

  • Mise en cache des données : En mémorisant les données qui ne changent pas souvent parmi les réponses API pour réduire les demandes inutiles.

3. Stockage de session

Partageant presque toutes les caractéristiques du stockage local, il présente néanmoins une différence décisive dans le cycle de vie des données.

• Caractéristiques :

  • Taille supérieure : Semblable au stockage local, il propose environ 5Mo de stockage.

  • Non transmis au serveur : Les données sont seulement conservées sur le client.

  • Cycle de vie basé sur la session : Les données sont limitées à l'onglet ou à la fenêtre actuelle. Lorsque cet onglet est fermé, toutes les données de stockage de session sont immédiatement supprimées.

  • Isolation des données : Même pour le même domaine, les données ne sont pas partagées entre différents onglets.

• Usages principaux :

  • Stockage de données temporaires : Pour conserver des informations qui ne sont nécessaires que dans l'onglet actuel.

  • Données de formulaire temporaires : Lors de la création de formulaires d'inscription ou d'enquêtes à plusieurs étapes, pour mémoriser temporairement les informations saisies jusqu'à ce que l'utilisateur ferme l'onglet.

  • Maintenir des données lors du rafraîchissement : Lorsque les données doivent être conservées lors d'un rafraîchissement de la page, mais supprimées à la fermeture de l'onglet.

4. IndexedDB

Si le stockage local et de session sont de simples stockages clé-valeur, IndexedDB est un système de base de données transactionnelle véritable existant dans le navigateur.

• Caractéristiques :

  • Stockage de grande capacité : De centaines de Mo à plusieurs Go, dans la limite de l'espace disque de l'utilisateur (selon la politique de navigateur), il peut stocker de très grandes quantités de données.

  • Types de données variés : En plus des chaînes, il peut stocker des objets JavaScript, des fichiers (Blob), des tableaux et d'autres types de données complexes.

  • Soutien à la transaction : Garantit l'intégrité et la cohérence des données. Il permet de regrouper plusieurs opérations en une seule unité.

  • API asynchrone : Toutes les opérations d'IndexedDB sont traitées de manière asynchrone. Cela permet de maintenir la réactivité de l'application même durant la lecture et l'écriture de grandes quantités de données sans bloquer le fil principal de l'UI.

  • Soutien aux index : Vous pouvez créer des index pour rechercher rapidement les données sur des champs spécifiques.

• Inconvénients :

  • API complexe : Comparé à localStorage, l'API est beaucoup plus complexe et difficile à utiliser. (C'est pourquoi il est courant d'utiliser des bibliothèques de wrappers comme Dexie.js ou idb.)

• Usages principaux :

  • Applications web hors ligne (PWA) : Utilisé pour stocker des données essentielles dans des applications devant fonctionner sans connexion réseau. (Exemples : éditeurs de documents hors ligne)

  • Mise en cache des états d'applications de grande envergure : Utilisé par Gemini ou ChatGPT pour stocker les historiques de conversation dans le navigateur ou pour gérer des données utilisateur complexes.

  • Stockage temporaire de contenu généré par l'utilisateur : Pour sécuriser la conservation des longs textes rédigés par l'utilisateur ou des données d'édition d'images avant de les uploader sur le serveur.

5. Comparaison d'ensemble

Voici un tableau résumant les caractéristiques des quatre types de stockage.

6. Conclusion : Que faut-il utiliser et quand ?

Lors du développement de SPA comme React, il est bon de bien distinguer les usages de ces quatre types de stockage.

• Cookies :

  • Utilisés pour les données que le serveur doit absolument connaître. (Ex: tokens d'authentification importants pour la sécurité)

  • Il est conseillé d'utiliser l'option HttpOnly pour protéger le token contre les attaques XSS.

• Stockage local :

  • Utilisé pour des données simples qui doivent rester même après que l'utilisateur a éteint et rallumé le navigateur.

  • (Ex : paramètres de thème UI, choix de langue)

• Stockage de session :

  • Utilisé pour des données temporaires nécessaires uniquement pendant le travail actuel (onglet).

  • (Ex : sauvegarde temporaire de saisies lors de la création d'un formulaire à plusieurs étapes)

• IndexedDB :

  • Utilisé quand vous avez besoin de données structurées volumineuses ou de support hors ligne.

  • (Ex : états d'applications complexes, mise en cache des historiques de conversation, données de documents hors ligne)

Note de sécurité importante : Le stockage local, le stockage de session et IndexedDB sont facilement accessibles par JavaScript. Par conséquent, ils sont vulnérables aux attaques XSS (Cross-Site Scripting). Les mots de pass, les informations personnelles et les tokens d'authentification sensibles ne doivent jamais être stockés ici. (Il est le plus sûr d'utiliser des cookies HttpOnly pour les tokens d'authentification.)