Comprendre le stockage local et le stockage de session en JavaScript

Stockage local et stockage de session en JavaScript

Les

API de stockage Web, notamment le Local Storage et le Session Storage, offrent un moyen simple de stocker des paires clé-valeur dans le navigateur d'un utilisateur. Ceux-ci font partie de la spécification HTML5 Web Storage et sont utilisés pour conserver les données dans les applications Web côté client.

---

1. Stockage local

• Stocke les données sans expiration.
• Les données persistent même si le navigateur est fermé et rouvert.

Caractéristiques clés :

• Stockage maximum : ~5 Mo par domaine (varie selon le navigateur).
• API synchrone (peut bloquer le thread principal pour les données volumineuses).
• Accessible uniquement depuis la même origine.

Cas d'utilisation courants :

• Stockage des préférences utilisateur (par exemple, thème, langue).
• Données persistantes du panier.

Exemple :

Stockage des données :

localStorage.setItem("username", "JohnDoe");

Récupération de données :

const username = localStorage.getItem("username");
console.log(username); // Output: JohnDoe

Suppression de données :

localStorage.removeItem("username");

Effacer toutes les données :

localStorage.clear();

---

2. Stockage de session

• Stocke les données uniquement pour la session en cours.
• Les données sont effacées lorsque l'onglet ou la fenêtre du navigateur est fermé.

Caractéristiques clés :

• Stockage maximum : ~5 Mo par domaine (varie selon le navigateur).
• API synchrone.
• Accessible uniquement depuis la même origine et la même session de navigateur.

Cas d'utilisation courants :

• Stockage de données temporaires (par exemple, saisie d'un formulaire pendant la navigation).
• Suivi des préférences spécifiques à la session.

Exemple :

Stockage des données :

sessionStorage.setItem("isLoggedIn", "true");

Récupération de données :

const isLoggedIn = sessionStorage.getItem("isLoggedIn");
console.log(isLoggedIn); // Output: true

Suppression de données :

sessionStorage.removeItem("isLoggedIn");

Effacer toutes les données :

sessionStorage.clear();

---

3. Différences entre le stockage local et le stockage de session

Fonctionnalité Stockage local Stockage de session ête>

Feature	Local Storage	Session Storage
Data Lifespan	Persistent	Cleared after session
Storage Size	~5MB	~5MB
Scope	Same-origin policy	Same-origin and session
Use Case	Long-term storage	Temporary/session storage

Durée de vie des données Persistant Effacer après la session Taille de stockage ~5 Mo ~5 Mo Portée Politique de même origine Même origine et même session Cas d'utilisation Stockage à long terme Stockage temporaire/de session

---

4. Stockage de données complexes

Le stockage local et le stockage de session stockent les données sous forme de chaînes. Pour stocker des données complexes comme des objets, vous devez utiliser JSON.stringify() et JSON.parse().

Exemple :

localStorage.setItem("username", "JohnDoe");

---

5. Meilleures pratiques

1. Évitez de stocker des données sensibles :

   • Les données sont stockées en texte brut et sont accessibles par JavaScript sur le même domaine.
   • Utilisez des méthodes sécurisées (par exemple, des cookies HTTP uniquement) pour les données sensibles.

2. Vérifiez la prise en charge du navigateur :

   • Assurez-vous que le navigateur de l'utilisateur prend en charge le stockage local et le stockage de session :

const username = localStorage.getItem("username");
console.log(username); // Output: JohnDoe

1. Taille limite des données :

   • Stockez uniquement les données essentielles pour éviter les problèmes de performances.

2. Utilisez les clés à bon escient :

   • Utilisez des clés uniques pour éviter les conflits avec des bibliothèques tierces.

3. Surveiller l'utilisation du stockage :

   • Vérifiez l'espace disponible pour éviter de dépasser la limite de stockage.

---

6. Effacer le stockage par programmation

Exemple :

localStorage.removeItem("username");

---

7. Débogage et gestion du stockage

La plupart des navigateurs modernes fournissent des outils de développement pour inspecter le stockage local et le stockage de session.

Étapes :

1. Ouvrez les outils de développement (F12 ou clic droit > Inspecter).
2. Accédez à l'onglet « Application ».
3. Sous « Stockage », affichez « Stockage local » et « Stockage de session ».

---

8. Résumé

Fonctionnalité Stockage local Stockage de session ête>

Feature	Local Storage	Session Storage
Persistent Storage	Yes	No
Accessible via JS	Yes	Yes
Data Scope	Origin	Origin Session

Stockage persistant Oui Non

Accessible via JS

Oui Oui

Portée des données

Origine Session d'origine
Le stockage local et le stockage de session sont des outils essentiels pour la gestion des données côté client. Comprendre quand utiliser chacun et suivre les meilleures pratiques garantit une mise en œuvre sécurisée et efficace dans les applications Web.

Bonjour, je m'appelle Abhay Singh Kathayat ! Je suis un développeur full-stack avec une expertise dans les technologies front-end et back-end. Je travaille avec une variété de langages et de frameworks de programmation pour créer des applications efficaces, évolutives et conviviales. N'hésitez pas à me contacter à mon e-mail professionnel : kaashshorts28@gmail.com.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!