Stockage local vs stockage de session / blogs / perficient

Dans le monde du développement Web, nous stockons souvent des données du côté client à diverses fins qui pourraient être de se souvenir des préférences des utilisateurs ou de maintenir l’état d’application. Ici, JavaScript fournit deux mécanismes clés pour cela, qui sont le stockage local et le stockage de session. Les deux font partie de l’API de stockage Web; Ils ont des différences uniques dans le comportement et les cas d’utilisation.

Ici, nous explorerons et apprendrons à connaître les comparaisons et les contrastes entre le stockage local et le stockage de session.

Qu’est-ce que l’API de stockage Web?

Il fournit un stockage simple de valeur clé dans le navigateur. Il est synchrone et permet aux développeurs de stocker des données qui persistent soit pendant la durée de la session de page, soit au-delà. Les deux principaux types de stockage sont:

1. Stockage local: Les données sont conservées même après la fermeture du navigateur et ont de nouveau ouvert.
2. Stockage de session: Les données sont effacées dès que l’onglet du navigateur est fermé.

Caractéristiques communes du stockage local et du stockage de session

• Stockage de valeur clé: Les deux stockent les données sous forme de paires de valeurs de clé de chaîne.
• Basé sur le navigateur: Les données sont accessibles uniquement dans le navigateur qui les stockait.
• Même politique d’origine: Les données sont isolées par l’origine (protocole, nom d’hôte et port).
• Stockage maximal: Les deux prennent généralement en charge jusqu’à 5 à 10 Mo de stockage par origine (varié par le navigateur).
• API synchrone: Les opérations sont bloquées et exécutées immédiatement.

Stockage local

Caractéristiques:

1. Stockage persistant: Les données persistent jusqu’à ce qu’elles soient explicitement supprimées, même si le navigateur est fermé.
2. Partage de crosstab: Les données sont accessibles entre différents onglets et fenêtres du même navigateur.

Cas d’utilisation:

• Stockage des préférences des utilisateurs (par exemple, paramètres du mode sombre).

Exemple:

Considérations:

• Les données persistantes peuvent conduire à un ballonnement de stockage s’il n’est pas géré soigneusement.
• Évitez de stocker des données sensibles en raison du manque de cryptage.

Stockage de session

Caractéristiques:

1. Stockage temporaire: Les données sont effacées lorsque l’onglet du navigateur est fermé.
2. Spécifique à l’onglet: Les données ne sont pas partagées entre les onglets ou les fenêtres.

Cas d’utilisation:

• Maintenir l’état spécifique à la session (par exemple, données de formulaire).

Exemple:

Considérations clés:

• Mieux adapté aux données transitoires spécifiques à la session.
• Les données ne persistent pas si l’utilisateur recharge ou ouvre un nouvel onglet.

Considérations de sécurité

1. Pas de cryptage: Le stockage local et le stockage de session stockent les données en texte brut, ce qui les rend inappropriés pour des informations sensibles.
2. Accessible par JavaScript: Les données stockées sont accessibles par n’importe quel script de même origine, ce qui la rend vulnérable aux attaques XSS.
3. Utilisez des alternatives sécurisées: Pour les données sensibles, envisagez d’utiliser des cookies avec des drapeaux httponly et sécurisés ou des séances côté serveur.

Quand utiliser le stockage local par rapport au stockage de session?

• Utiliser le stockage local:
  • Pour stocker les préférences ou les paramètres des utilisateurs.
  • Pour les données qui doivent persister à travers les sessions (par exemple, les thèmes d’applications, les articles enregistrés).
• Utiliser le stockage de session:
  • Pour les données spécifiques à la session, telles que les entrées de formulaire temporaire.
  • Lorsque les données ne doivent pas persister sur les onglets ou après la fin de la session.

Conclusion

Évaluez toujours les implications de sécurité et de performance du stockage des données du côté du client et évitez de stocker des informations sensibles ou confidentielles dans l’un ou l’autre mécanisme de stockage.

Le stockage local et le stockage de session sont tous deux des outils incroyables pour gérer la gestion des données côté client dans le monde d’aujourd’hui. Mais les connaître puis les utiliser dépend de l’étendue des fonctionnalités et de la persistance.