HTML - Stockage Web
Types de stockage Web
Il existe deux types de stockage Web : le stockage local et le stockage de session. Les deux permettent de stocker des paires clé-valeur dans le navigateur, mais ils ont des durées de vie et des portées différentes.
Stockage local
Le stockage local est un type de stockage Web qui vous permet de stocker des données dans le navigateur sans date d'expiration. Les données stockées dans le stockage local resteront dans le navigateur même après la fermeture de la fenêtre du navigateur. Cela le rend utile pour stocker des données qui doivent rester disponibles plus longtemps.
Pour stocker des données dans le stockage local, vous pouvez utiliser l'objet localStorage.
Conseil: Stockage d'une valeur dans le stockage local
localStorage.setItem('username', 'JohnDoe');Nous stockons une paire clé-valeur où la clé est 'username' et la valeur est 'JohnDoe'. Pour récupérer les données stockées, vous pouvez utiliser la méthode getItem() :
Conseil: Récupération d'une valeur du stockage local
const username = localStorage.getItem('username');
console.log(username); // Sortie : 'JohnDoe'Vous pouvez également modifier la valeur d'un élément stocké en utilisant à nouveau setItem() avec la même clé et une nouvelle valeur :
Conseil: Modification d'une valeur dans le stockage local
localStorage.setItem('username', 'JaneSmith');Stockage de session
Le stockage de session est un autre type de stockage Web qui vous permet de stocker des données pour une seule session. Les données stockées dans le stockage de session resteront dans le navigateur uniquement jusqu'à ce que la fenêtre ou l'onglet du navigateur soit fermé. Une fois la session terminée, les données sont effacées.
Pour stocker des données dans le stockage de session, vous pouvez utiliser l'objet sessionStorage, qui a les mêmes méthodes que localStorage.
Conseil: Stockage d'une valeur dans le stockage de session
sessionStorage.setItem('theme', 'dark');Nous stockons une paire clé-valeur où la clé est 'theme' et la valeur est 'dark'. Pour récupérer les données stockées, vous pouvez utiliser la méthode getItem() :
Conseil: Récupération d'une valeur du stockage de session
const theme = sessionStorage.getItem('theme');
console.log(theme); // Sortie : 'dark'Vous pouvez modifier les données stockées dans le stockage de session de la même manière que dans le stockage local, en utilisant la méthode setItem() avec la même clé et une nouvelle valeur :
Conseil: Modification d'une valeur dans le stockage de session
sessionStorage.setItem('theme', 'light');Le stockage local et le stockage de session ont chacun leurs utilisations basées sur la durée de vie et la portée des données que vous souhaitez stocker. Le stockage local est bon pour stocker des données qui doivent rester disponibles même après la fermeture du navigateur, tandis que le stockage de session est utile pour stocker des données spécifiques à une seule session ou page.
Travailler avec le stockage Web
Le stockage Web fournit des méthodes pour stocker, récupérer et supprimer des données dans le navigateur. Examinons comment travailler avec les données dans le stockage local et le stockage de session.
Stocker des données
Pour stocker des données dans le stockage Web, vous pouvez utiliser la méthode setItem(). Cette méthode prend deux arguments : la clé (une chaîne de caractères) et la valeur que vous souhaitez stocker.
Vous pouvez stocker différents types de données dans le stockage Web, tels que des chaînes de caractères, des nombres et des objets. Lors du stockage d'objets, vous devez les convertir en chaîne de caractères en utilisant JSON.stringify() avant de les stocker.
Conseil: Stocker une chaîne de caractères et un objet dans le stockage local
// Stocker une chaîne de caractères
localStorage.setItem('username', 'JohnDoe');
// Stocker un objet
const user = {
name: 'John Doe',
age: 25,
email: 'john@example.com'
};
localStorage.setItem('user', JSON.stringify(user));Récupérer des données
Pour récupérer des données du stockage Web, vous pouvez utiliser la méthode getItem(). Cette méthode prend un argument : la clé des données que vous voulez récupérer.
Si les données stockées sont une chaîne de caractères, vous pouvez les utiliser directement. Cependant, si vous avez stocké un objet, vous devez le reconvertir en objet en utilisant JSON.parse().
Conseil: Récupérer des données du stockage local
// Récupérer une chaîne de caractères
const username = localStorage.getItem('username');
console.log(username); // Sortie : 'JohnDoe'
// Récupérer un objet
const userString = localStorage.getItem('user');
const user = JSON.parse(userString);
console.log(user.name); // Sortie : 'John Doe'
console.log(user.age); // Sortie : 25
console.log(user.email); // Sortie : 'john@example.com'Supprimer des données
Pour supprimer des données du stockage Web, vous avez deux options :
| Option | Description |
|---|---|
removeItem() |
Supprime une paire clé-valeur spécifique |
clear() |
Supprime toutes les données stockées dans le stockage Web |
Conseil: Supprimer des données du stockage local
// Supprimer un élément spécifique
localStorage.removeItem('username');
// Supprimer toutes les données
localStorage.clear();Les mêmes méthodes (setItem(), getItem(), removeItem(), et clear()) peuvent être utilisées avec le stockage de session en remplaçant localStorage par sessionStorage.
N'oubliez pas que les données stockées dans le stockage Web sont spécifiques au domaine. Chaque domaine a son propre espace de stockage séparé, et le JavaScript d'un domaine ne peut pas accéder aux données stockées par un autre domaine.
Événements de stockage Web
Le stockage Web fournit des événements qui vous permettent de réagir aux changements dans les données stockées. Ces événements sont déclenchés lorsque des données sont stockées, modifiées ou supprimées dans le stockage local ou le stockage de session.
L'événement storage est déclenché chaque fois qu'un changement se produit dans le stockage Web. Cet événement est déclenché sur l'objet window de toutes les pages de la même origine qui ont accès à la zone de stockage. L'objet événement transmis à l'écouteur d'événements contient des propriétés utiles telles que :
| Propriété | Description |
|---|---|
key |
La clé de l'élément qui a été modifié (ajouté, mis à jour ou supprimé). |
oldValue |
L'ancienne valeur de l'élément avant le changement (null si un nouvel élément a été ajouté). |
newValue |
La nouvelle valeur de l'élément après le changement (null si un élément a été supprimé). |
url |
L'URL de la page qui a effectué le changement. |
storageArea |
L'objet de stockage (localStorage ou sessionStorage) qui a été affecté. |
Pour gérer les événements de stockage, vous pouvez utiliser la méthode addEventListener() sur l'objet window.
Conseil: Gestion des événements de stockage
window.addEventListener('storage', function(event) {
console.log('Événement de stockage déclenché');
console.log('Clé:', event.key);
console.log('Ancienne valeur:', event.oldValue);
console.log('Nouvelle valeur:', event.newValue);
console.log('URL:', event.url);
console.log('Zone de stockage:', event.storageArea);
});Il est important de noter que l'événement storage n'est pas déclenché dans la même page qui a effectué le changement. Il n'est déclenché que dans d'autres pages de la même origine qui ont accès à la zone de stockage. Cela permet une communication entre différentes pages ou onglets de votre application.
Conseil: Synchronisation des données entre les pages
// Page 1
localStorage.setItem('theme', 'sombre');
// Page 2
window.addEventListener('storage', function(event) {
if (event.key === 'theme') {
document.body.className = event.newValue;
}
});La Page 1 définit la valeur de la clé 'theme' dans le stockage local. La Page 2 écoute les événements de stockage et vérifie si la clé modifiée est 'theme'. Si c'est le cas, elle met à jour le nom de classe de l'élément <body> avec la nouvelle valeur, appliquant ainsi le changement de thème.
Les événements de stockage offrent un moyen de réagir aux changements dans le stockage Web et permettent la communication et la synchronisation entre différentes pages ou onglets de votre application. Ils peuvent être utilisés à diverses fins, telles que la synchronisation des préférences utilisateur, la mise à jour en temps réel des données affichées, ou le déclenchement de certaines actions basées sur les changements de données stockées.
Sécurité du stockage Web
Lorsque vous utilisez le stockage Web (Stockage local et Stockage de session) pour stocker des données dans le navigateur, vous devez prendre en compte la sécurité pour protéger votre application et les données des utilisateurs contre les accès non autorisés ou les attaques.
L'un des principaux risques de sécurité associés au stockage Web est les attaques par scripts intersites (XSS). Les attaques XSS se produisent lorsque des scripts malveillants sont injectés dans votre application et s'exécutent dans le contexte de votre page. Si vous stockez des données sensibles dans le stockage Web sans mesures de sécurité appropriées, un attaquant pourrait accéder à ces données et les voler.
Pour prévenir les attaques XSS, vous devez toujours valider et assainir toute entrée utilisateur avant de la stocker dans le stockage Web. Cela signifie vérifier l'entrée pour détecter tout caractère ou script malveillant et les supprimer ou les encoder. Vous pouvez utiliser des bibliothèques ou des frameworks qui fournissent des fonctions intégrées de validation et d'assainissement des entrées pour vous aider dans ce processus.
Conseil: Assainir l'entrée utilisateur
function sanitizeInput(input) {
// Supprimer toutes les balises HTML et les caractères spéciaux
return input.replace(/<[^>]*>?/gm, '').replace(/[^\w\s]/gi, '');
}
const userInput = '<script>alert("Attaque XSS!");</script>';
const sanitizedInput = sanitizeInput(userInput);
localStorage.setItem('userInput', sanitizedInput);Une autre considération de sécurité est le chiffrement des données sensibles avant de les stocker dans le stockage Web. Bien que les données du stockage Web ne soient pas directement accessibles par d'autres sites Web, elles peuvent toujours être lues par quiconque a accès à l'appareil ou au navigateur de l'utilisateur. Le chiffrement des données ajoute une couche supplémentaire de protection.
Pour chiffrer les données, vous pouvez utiliser des algorithmes de chiffrement comme AES (Advanced Encryption Standard) ou des bibliothèques qui fournissent des fonctions de chiffrement. Avant de stocker des données sensibles, chiffrez-les avec une clé de chiffrement sécurisée. Lors de la récupération des données, déchiffrez-les en utilisant la même clé.
Conseil: Chiffrer et déchiffrer les données
function encryptData(data, key) {
// Implémenter la logique de chiffrement en utilisant une bibliothèque ou un algorithme
// Exemple utilisant un simple chiffrement par substitution
const encryptedData = data.split('').map(char => String.fromCharCode(char.charCodeAt(0) + key)).join('');
return encryptedData;
}
function decryptData(encryptedData, key) {
// Implémenter la logique de déchiffrement en utilisant une bibliothèque ou un algorithme
// Exemple utilisant un simple chiffrement par substitution
const decryptedData = encryptedData.split('').map(char => String.fromCharCode(char.charCodeAt(0) - key)).join('');
return decryptedData;
}
const sensitiveData = 'Données secrètes';
const encryptionKey = 3;
const encryptedData = encryptData(sensitiveData, encryptionKey);
localStorage.setItem('sensitiveData', encryptedData);
// Récupération et déchiffrement des données
const storedEncryptedData = localStorage.getItem('sensitiveData');
const decryptedData = decryptData(storedEncryptedData, encryptionKey);
console.log(decryptedData); // Sortie : 'Données secrètes'Il est important de choisir une clé de chiffrement sécurisée et de la garder en sécurité. Évitez de stocker la clé de chiffrement au même endroit que les données chiffrées, car cela annulerait l'objectif du chiffrement.
Soyez également prudent quant aux données que vous stockez dans le stockage Web. Évitez de stocker des informations hautement sensibles comme les mots de passe, les numéros de carte de crédit ou les numéros d'identification personnels (PIN) dans le stockage Web, même s'ils sont chiffrés. Il est généralement plus sûr de stocker ces données sensibles côté serveur et d'utiliser des protocoles de communication sécurisés comme HTTPS pour transmettre les données.
Exemples pratiques et cas d'utilisation
Le stockage Web (Local Storage et Session Storage) a de nombreuses utilisations dans le développement web. Voici quelques exemples courants et cas d'utilisation où le stockage Web peut améliorer l'expérience utilisateur et la fonctionnalité de l'application.
Stocker les préférences et les paramètres de l'utilisateur
Le stockage Web est un moyen de conserver les préférences et les paramètres de l'utilisateur. Vous pouvez utiliser le Local Storage pour sauvegarder des éléments tels que la langue préférée de l'utilisateur, le thème ou les choix de mise en page. Cela vous permet de conserver les préférences de l'utilisateur même après qu'il ait quitté le site et y soit revenu plus tard.
Conseil: Stocker les préférences et les paramètres de l'utilisateur
// Définir la préférence de thème de l'utilisateur
function setTheme(theme) {
localStorage.setItem('theme', theme);
applyTheme(theme);
}
// Appliquer le thème sélectionné
function applyTheme(theme) {
document.body.className = theme;
}
// Obtenir la préférence de thème de l'utilisateur au chargement de la page
window.addEventListener('load', function() {
const storedTheme = localStorage.getItem('theme');
if (storedTheme) {
applyTheme(storedTheme);
}
});La fonction setTheme() stocke le thème sélectionné par l'utilisateur dans le Local Storage. La fonction applyTheme() applique le thème à la page en définissant le nom de classe de l'élément <body>. Au chargement de la page, nous vérifions si une préférence de thème est stockée et l'appliquons si elle est trouvée.
Mettre en cache des données pour un accès hors ligne
Le stockage Web peut mettre en cache des données pour un accès hors ligne. Si votre application web doit fonctionner hors ligne ou dans des situations de faible connectivité, vous pouvez stocker des données dans le Local Storage. Cela permet à l'application de fonctionner même lorsque l'utilisateur n'est pas connecté à Internet.
Conseil: Mettre en cache des données pour un accès hors ligne
// Mettre en cache les données dans le Local Storage
function cacheData(data) {
localStorage.setItem('cachedData', JSON.stringify(data));
}
// Récupérer les données mises en cache depuis le Local Storage
function getCachedData() {
const cachedData = localStorage.getItem('cachedData');
return cachedData ? JSON.parse(cachedData) : null;
}
// Récupérer les données depuis le serveur
function fetchDataFromServer() {
// Faire une requête API pour récupérer les données
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
// Mettre en cache les données récupérées
cacheData(data);
// Utiliser les données dans l'application
displayData(data);
})
.catch(error => {
console.log('Erreur lors de la récupération des données:', error);
// Récupérer les données mises en cache comme solution de repli
const cachedData = getCachedData();
if (cachedData) {
displayData(cachedData);
} else {
console.log('Aucune donnée mise en cache disponible.');
}
});
}La fonction cacheData() stocke les données récupérées dans le Local Storage. La fonction getCachedData() récupère les données mises en cache depuis le Local Storage. Si l'application ne parvient pas à récupérer les données du serveur (par exemple, en raison d'une erreur réseau), elle se replie sur les données mises en cache si elles sont disponibles.
Implémenter la fonctionnalité du panier d'achat
Le stockage Web peut implémenter la fonctionnalité du panier d'achat dans les applications de commerce électronique. Vous pouvez utiliser le Session Storage pour stocker les produits et les quantités sélectionnés par l'utilisateur pendant qu'il navigue sur le site web. Cela permet au panier d'achat de rester intact même si l'utilisateur quitte la page ou ferme l'onglet du navigateur.
Conseil: Implémenter la fonctionnalité du panier d'achat
// Ajouter un produit au panier d'achat
function addToCart(product) {
let cart = JSON.parse(sessionStorage.getItem('cart')) || [];
cart.push(product);
sessionStorage.setItem('cart', JSON.stringify(cart));
}
// Supprimer un produit du panier d'achat
function removeFromCart(productId) {
let cart = JSON.parse(sessionStorage.getItem('cart')) || [];
cart = cart.filter(product => product.id !== productId);
sessionStorage.setItem('cart', JSON.stringify(cart));
}
// Obtenir le contenu actuel du panier d'achat
function getCartContents() {
return JSON.parse(sessionStorage.getItem('cart')) || [];
}La fonction addToCart() ajoute un produit au panier d'achat stocké dans le Session Storage. La fonction removeFromCart() supprime un produit du panier en fonction de son ID. La fonction getCartContents() récupère le contenu actuel du panier d'achat.
Sauvegarder temporairement les données de formulaire
Le stockage Web peut sauvegarder temporairement les données de formulaire. Si un utilisateur remplit un long formulaire et ferme accidentellement le navigateur ou quitte la page, vous pouvez utiliser le Session Storage pour sauvegarder sa progression. Lorsqu'il revient au formulaire, vous pouvez restaurer les données sauvegardées, lui permettant de continuer là où il s'était arrêté.
Conseil: Sauvegarder temporairement les données de formulaire
// Sauvegarder les données du formulaire dans le Session Storage
function saveFormData() {
const form = document.querySelector('form');
const formData = new FormData(form);
sessionStorage.setItem('formData', JSON.stringify(Object.fromEntries(formData)));
}
// Charger les données du formulaire depuis le Session Storage
function loadFormData() {
const savedData = sessionStorage.getItem('formData');
if (savedData) {
const formData = JSON.parse(savedData);
const form = document.querySelector('form');
Object.keys(formData).forEach(key => {
const field = form.elements[key];
if (field) {
field.value = formData[key];
}
});
}
}
// Sauvegarder les données du formulaire lors de la modification d'un champ
document.querySelector('form').addEventListener('input', saveFormData);
// Charger les données du formulaire au chargement de la page
window.addEventListener('load', loadFormData);La fonction saveFormData() sauvegarde les données du formulaire dans le Session Storage chaque fois qu'un champ de saisie est modifié. La fonction loadFormData() charge les données du formulaire sauvegardées depuis le Session Storage lorsque la page se charge, en remplissant les champs du formulaire avec les valeurs précédemment saisies.
Voici quelques exemples de la manière dont le stockage Web peut être utilisé dans des scénarios pratiques. Le stockage Web offre un moyen simple de stocker des données côté client, permettant diverses fonctionnalités et améliorations dans les applications web. Il propose une solution pour améliorer l'expérience utilisateur et la fonctionnalité de vos applications web.