La session et le stockage local sont des méthodes de stockage de navigateur qui vous permettent de stocker des données avec des requêtes HTTP sans état. Ils constituent une alternative au stockage basé sur les cookies et ont de nombreuses utilisations dans le développement Web.
Bien qu'ils fonctionnent de manière très similaire, il existe des différences importantes dont vous devez être conscient.
Stockage local et stockage de session: à quoi servent-ils ?
Le stockage local et de session sont des API JavaScript que vous pouvez utiliser pour stocker des données côté client. Ils permettent à un site Web de stocker des données sur le navigateur et demandent au navigateur d'y accéder ultérieurement.
Selon vos besoins, vous pouvez utiliser le stockage local ou de session pour stocker les données. Les deux méthodes de stockage sont similaires aux cookies mais sans les mêmes problèmes de confidentialité concernant les cookies. Par conséquent, la plupart des sites Web modernes préfèrent utiliser uniquement des méthodes de stockage Web ou les combiner avec des cookies comme solution de rechange.
Contrairement aux cookies, le stockage local et le stockage de session n'envoient pas de données au serveur via des en-têtes HTTP. Vous devez les utiliser uniquement pour les fonctionnalités côté client.
De plus, le stockage local et de session ont chacun une limite de stockage d'environ 5 Mo par domaine. Ils fournissent plus de stockage que les cookies, qui n'ont qu'une capacité de 4 KiB par cookie.
Qu'est-ce que le stockage de session ?
Une session de navigation se rapproche de votre utilisation d'un site Web. Si vous visitez un site, naviguez un peu, puis éteignez votre ordinateur, vous pouvez considérer ce temps comme une seule session. La configuration de votre navigateur peut modifier cela de manière subtile, mais une session vise à représenter la durée pendant laquelle vous interagissez avec un site.
Le stockage de session est unique pour chaque onglet du navigateur. Si vous ouvrez un nouvel onglet et accédez au même site, vous démarrerez une nouvelle session avec son propre stockage. Cependant, si vous utilisez une fonction "onglet dupliqué" dans votre navigateur, cela peut réutiliser la même session. Vous ne pouvez pas trop vous fier aux détails spécifiques d'une "session". Au lieu de cela, concentrez-vous sur le concept de base: le stockage de session est temporaire.
Le stockage de session a des méthodes d'API intégrées pour travailler avec des données de paire clé/valeur. Vous pouvez stocker des données de Javascript ainsi:
sessionStorage.setItem("clé", "valeur");
Et pour récupérer la valeur stockée :
sessionStorage.getItem("clé");Notez que les deux clé et évaluer sont uniquement des types de chaîne. Si vous souhaitez stocker un type différent, vous devrez le convertir en chaîne, explicitement ou implicitement.
Qu'est-ce que le stockage local ?
Le stockage local conserve les données de toutes les instances d'un site, qu'elles se trouvent dans différents onglets ou fenêtres. Il est également permanent, de sorte que les données ne disparaissent pas lorsque vous fermez votre navigateur.
Lorsque vous ouvrez un site Web qui utilisait auparavant le stockage local, il aura toujours accès à ces données stockées.
En tant que développeur Web, vous pouvez utiliser ce mécanisme pour conserver des données sur un utilisateur. Certains sites Web peuvent l'utiliser pour vous garder connecté ou offrir une expérience plus personnalisée.
Comme pour le stockage de session, vous pouvez définir un objet de stockage local avec une ligne de code JavaScript :
localStorage.setItem("clé", "valeur");
Pour accéder à la valeur de la clé :
localStorage.getItem("clé");
Notez que ces méthodes fonctionnent de la même manière que le stockage de session, elles utilisent simplement un type de magasin de données différent.
Alors que le stockage de session efface les données dès la fin de la session, la seule façon d'effacer le stockage local est de le supprimer explicitement. Les deux types de stockage offrent deux méthodes pour effacer les données. La première supprime une donnée spécifique en fonction de sa clé :
localStorage.removeItem("clé");Vous pouvez également supprimer toutes les données stockées par votre site, quelle que soit sa clé :
localStorage.clear();Vous pouvez en savoir plus sur ces méthodes d'API de stockage Web sur le javascript.info site Internet.
Quand avez-vous besoin d'un stockage local ?
Étant donné que le stockage local est persistant, il est préférable de conserver les données lors des visites des utilisateurs. Si vous souhaitez stocker les préférences du site ou mettre en cache des données à long terme, le stockage local est approprié. Vous ne voudrez peut-être pas stocker des données plus sensibles à l'aide du stockage local, car il est permanent.
Comme le stockage local et de session sont des méthodes frontales, vous voudrez peut-être éviter de les utiliser pour des fonctions basées sur le serveur telles que la connexion de l'utilisateur. Vous pourriez considérer les cookies comme une alternative dans ces cas.
Quand avez-vous besoin d'un stockage de session ?
Si vous souhaitez stocker des données uniquement lorsqu'un utilisateur interagit avec votre site, le stockage de session est idéal. Il peut s'agir d'une mise en cache à court terme ou de données d'utilisation concernant une visite spécifique sur votre site.
Le stockage de session est préférable pour stocker des informations plus sensibles car il expire.
Stockage local vs. Stockage de session: lequel est le plus sécurisé ?
Comme vous l'avez vu, les méthodes de stockage local et de session sont similaires à bien des égards, mais ont toujours des cas d'utilisation personnalisés. Vous ne devriez pas considérer l'un ou l'autre comme sécurisé car ce sont des technologies frontales auxquelles JavaScript a accès. Cependant, le stockage de session est très pratique, et son caractère temporaire est rassurant.
Le stockage local est permanent et peut donc poser des problèmes de sécurité supplémentaires. Toute personne qui ouvre un navigateur peut, en théorie, accéder au stockage local. Vous devriez être conscient de comment fonctionnent les attaques XSS et comment les prévenir.
Stockage local ou stockage de session: lequel utiliser ?
Le stockage de session est légèrement plus sécurisé en raison de sa nature temporaire. Cependant, votre choix de méthode de stockage Web dépend de vos besoins. Le stockage JavaScript est le plus adapté à une utilisation côté client uniquement. Mais il offre un magasin de données pratique basé sur un navigateur et est très facile à utiliser.
N'oubliez pas que si le stockage local stocke les données sur plusieurs onglets, le stockage de session est unique pour chaque onglet, pour la plupart. Vous devez vous assurer que votre application fait le moins d'hypothèses possible et répond aux cas extrêmes.
Les cookies sont une forme plus ancienne de persistance des données, mais ils sont toujours très utilisés. Vous voudrez peut-être les vérifier pour les données que vous devez transmettre au serveur.
