Vous devez persister quelque chose dans le navigateur. Comment choisissez-vous entre localStorage, sessionStorage, les cookies et IndexedDB ?

N'utilisez les cookies que lorsque le serveur a besoin de la valeur à chaque requête, et posez HttpOnly, Secure et SameSite pour tout ce qui est sensible. Utilisez sessionStorage pour l'état qui doit mourir avec l'onglet, localStorage pour de petites données clé valeur synchrones qui survivent aux redémarrages, et IndexedDB pour tout ce qui est volumineux, structuré ou asynchrone. Ne gardez jamais de jetons ni de données personnelles dans localStorage, puisque n'importe quel script de la page peut les lire.

Ma première question, c'est de savoir si le serveur en a besoin. Si oui, c'est un cookie, et il reçoit HttpOnly, Secure et SameSite, ce qui veut aussi dire que mon JavaScript ne le lit pas. Si seul le client en a besoin, ça se joue sur la durée de vie et la taille. sessionStorage pour ce qui est limité à l'onglet, comme une étape d'assistant ou une position de défilement que je ne veux pas voir fuiter dans un autre onglet. localStorage pour de petites préférences durables, le thème, le dernier filtre utilisé, ce genre de chose, et je le garde petit parce que c'est synchrone, donc un gros blob JSON parsé au démarrage se voit directement dans mon time to interactive. IndexedDB dès que les données sont grandes ou structurées, par exemple une liste d'enregistrements mise en cache pour un usage hors ligne, en général derrière un petit wrapper parce que l'API brute est désagréable. La règle sur laquelle je ne cède pas, c'est que les jetons d'accès ne vont pas dans localStorage, parce que tout script injecté peut les lire ; ceux-là vivent dans un cookie HttpOnly ou en mémoire seulement.