4.1 localStorage et sessionStorage
Les stockages web permettent aux applications web de sauvegarder des données dans le navigateur de l'utilisateur. C'est utile pour conserver des informations qui doivent être préservées entre les visites ou lors de la navigation entre les pages. HTML5 a introduit deux types principaux de stockages web : localStorage et sessionStorage.
Qu'est-ce que localStorage ?
localStorage — c'est un stockage de données qui est conservé dans le navigateur de l'utilisateur pour une durée indéterminée. Les données dans le localStorage restent disponibles même après la fermeture du navigateur et le redémarrage de l'ordinateur. C'est utile pour stocker des informations qui doivent être conservées entre les sessions, comme les paramètres utilisateur ou les données du panier d'achat.
Qu'est-ce que sessionStorage ?
sessionStorage — c'est un stockage de données qui est conservé dans le navigateur de l'utilisateur pendant une seule session. Les données dans le sessionStorage sont disponibles seulement tant que l'onglet ou la fenêtre du navigateur est ouvert. C'est utile pour stocker des données nécessaires uniquement pendant une session, comme les données temporaires de formulaire ou l'état de l'application.
Méthodes et propriétés principales
Méthodes et propriétés de localStorage et sessionStorage
Les deux types de stockages web ont le même API, qui inclut des méthodes et des propriétés pour travailler avec les données :
setItem(key, value): sauvegarde une valeur avec la clé spécifiée.getItem(key): retourne la valeur sauvegardée sous la clé spécifiée.removeItem(key): supprime la valeur avec la clé spécifiée.clear(): nettoie toutes les données dans le stockage.key(index): retourne la clé à l'index donné.length: retourne le nombre de paires clé-valeur dans le stockage.
4.2 Exemples d'utilisation
Exemple d'utilisation de localStorage :
<!DOCTYPE html>
<html>
<head>
<title>localStorage Example</title>
</head>
<body>
<h1>localStorage Example</h1>
<input type="text" id="username" placeholder="Enter your username">
<button id="saveButton">Save</button>
<button id="loadButton">Load</button>
<script>
const saveButton = document.getElementById('saveButton');
const loadButton = document.getElementById('loadButton');
const usernameInput = document.getElementById('username');
// Sauvegarde de la valeur dans localStorage
saveButton.addEventListener('click', function() {
const username = usernameInput.value;
localStorage.setItem('username', username);
alert('Nom d'utilisateur sauvegardé!');
});
// Chargement de la valeur depuis localStorage
loadButton.addEventListener('click', function() {
const savedUsername = localStorage.getItem('username');
if (savedUsername) {
usernameInput.value = savedUsername;
alert('Nom d'utilisateur chargé!\n' + `${savedUsername}`);
} else {
alert('Aucun nom d'utilisateur trouvé.');
}
});
</script>
</body>
</html>
Exemple d'utilisation de sessionStorage :
<!DOCTYPE html>
<html>
<head>
<title>sessionStorage Example</title>
</head>
<body>
<h1>sessionStorage Example</h1>
<input type="text" id="sessionData" placeholder="Enter some data">
<button id="saveSessionButton">Save</button>
<button id="loadSessionButton">Load</button>
<script>
const saveSessionButton = document.getElementById('saveSessionButton');
const loadSessionButton = document.getElementById('loadSessionButton');
const sessionDataInput = document.getElementById('sessionData');
// Sauvegarde de la valeur dans sessionStorage
saveSessionButton.addEventListener('click', function() {
const data = sessionDataInput.value;
sessionStorage.setItem('data', data);
alert('Données sauvegardées dans la session!');
});
// Chargement de la valeur depuis sessionStorage
loadSessionButton.addEventListener('click', function() {
const savedData = sessionStorage.getItem('data');
if (savedData) {
sessionDataInput.value = savedData;
alert('Données chargées depuis la session!\n' + `${savedData}`);
} else {
alert('Aucune donnée trouvée dans la session.');
}
});
</script>
</body>
</html>
4.3 Comparaison entre localStorage et sessionStorage
Différences entre localStorage et sessionStorage
-
Durée de stockage :
- localStorage garde les données pour une durée indéterminée, sauf si l'utilisateur ou un script les supprime explicitement.
- sessionStorage garde les données seulement pendant la session courante (onglet ou fenêtre du navigateur).
-
Portée :
- Les données dans localStorage sont disponibles dans tous les onglets et fenêtres d'un même domaine.
- Les données dans sessionStorage sont disponibles uniquement dans l'onglet ou la fenêtre courante.
-
Taille du stockage :
- En général, localStorage et sessionStorage ont une limite de 5-10 Mo par domaine, selon le navigateur.
Exemple de comparaison entre l'utilisation de localStorage et sessionStorage :
<!DOCTYPE html>
<html>
<head>
<title>Comparison Example</title>
</head>
<body>
<script>
// Utilisation de localStorage
localStorage.setItem('persistentData', 'These data persist across sessions');
console.log(localStorage.getItem('persistentData')); // "These data persist across sessions"
// Utilisation de sessionStorage
sessionStorage.setItem('temporaryData', 'These data persist only during the session');
console.log(sessionStorage.getItem('temporaryData')); // "These data persist only during the session"
</script>
</body>
</html>
4.4 Domaines d'application
Quand utiliser localStorage :
- Stocker des données qui doivent être conservées entre les sessions, comme les paramètres utilisateur ou les préférences
- Stocker des données qui doivent être accessibles dans tous les onglets et fenêtres d'un même domaine
- Stocker des données qui changent rarement
Quand utiliser sessionStorage :
- Stocker des données temporaires nécessaires seulement pendant la session courante
- Stocker des données spécifiques à l'onglet ou la fenêtre courante du navigateur
- Stocker des données qui doivent être supprimées à la fermeture de l'onglet ou de la fenêtre
Sécurité et confidentialité
Lors de l'utilisation des stockages web, il est important de prendre en compte les questions de sécurité et de confidentialité :
- Chiffrement : les données dans les stockages web ne sont pas chiffrées par défaut. Si vous devez stocker des informations sensibles, il est recommandé de chiffrer les données avant de les sauvegarder.
- Attaques cross-domaines : les stockages web fonctionnent au sein d'un même domaine, ce qui empêche l'accès aux données depuis d'autres domaines. Cependant, il est important de se protéger contre les attaques XSS (cross-site scripting) pour éviter que des attaquants puissent accéder aux données du stockage.
- Limitation de la taille des données : essayez de n'enregistrer que les informations nécessaires et nettoyez régulièrement les données obsolètes pour éviter que le stockage ne soit saturé.
GO TO FULL VERSION