Le stockage Web est une fonctionnalité HTML5 qui vous permet de stocker des données côté client, en les conservant même lorsque l'utilisateur ferme le navigateur. Il existe deux types de stockage Web : localStorage
et sessionStorage
. Voici quelques façons d’utiliser le stockage Web en HTML5 :
Stocker des données:
Vous pouvez stocker des paires clé-valeur en utilisant setItem
méthodes :
javascript // Using localStorage
localStorage.setItem('key', 'value');
// Using sessionStorage
sessionStorage.setItem('key', 'value');
Récupération des données:
Récupérez les données stockées en utilisant la méthode getItem
:
javascript // Using localStorage
var storedValue = localStorage.getItem('key');
// Using sessionStorage
var storedValue = sessionStorage.getItem('key');
Suppression de données :
Vous pouvez supprimer un élément spécifique en utilisant la méthode removeItem
:
javascript // Using localStorage
localStorage.removeItem('key');
// Using sessionStorage
sessionStorage.removeItem('key');
Effacement de toutes les données :
Pour effacer toutes les données stockées, vous pouvez utiliser la méthode clear
:
javascript // Using localStorage
localStorage.clear();
// Using sessionStorage
sessionStorage.clear();
Gestion des événements de stockage :
Vous pouvez écouter les modifications apportées au stockage avec l'événement storage
:
javascript window.addEventListener('storage', function (e) {
// Handle storage changes here
});
Cet événement est déclenché chaque fois que localStorage
ou sessionStorage
est modifié dans une autre fenêtre ou un autre onglet.
Vérification du support :
Avant d'utiliser Web Storage, c'est une bonne idée de vérifier si le navigateur le prend en charge :
javascript if (typeof(Storage) !== 'undefined') {
// Web Storage is supported
} else {
// Web Storage is not supported
// Handle the lack of support accordingly
}
Utilisation de JSON pour les données complexes :
Web Storage stocke les données sous forme de chaînes, donc si vous souhaitez stocker des objets complexes, vous pouvez utiliser JSON.stringify
et JSON.parse
:
javascript var complexObject = { key: 'value', nested: { prop: 'nestedValue' } };
// Store complex object
localStorage.setItem('complexObject', JSON.stringify(complexObject));
// Retrieve complex object
var retrievedObject = JSON.parse(localStorage.getItem('complexObject'));
N'oubliez pas que même si le stockage Web constitue un moyen pratique de stocker de petites quantités de données côté client, il n'est pas adapté au stockage d'informations sensibles en raison de son accessibilité aux scripts côté client. Pour des options de stockage plus sécurisées, envisagez d'utiliser des cookies ou un stockage côté serveur.