Comprendre le stockage local : découvrir les mystères de ce mystérieux fichier

Décryptage de LocalStorage : Quel est ce mystérieux fichier ?

Avec le développement d'Internet, le développement Web est devenu de plus en plus courant, et les informations et données personnelles des personnes sont également largement stockées dans les navigateurs. Et l'un des fichiers mystérieux est LocalStorage. Alors, qu’est-ce que LocalStorage exactement ? Dans cet article, nous décrypterons les principes et l'utilisation de LocalStorage et fournirons des exemples de code spécifiques.

LocalStorage est un mécanisme de stockage Web fourni par le navigateur, qui peut stocker et récupérer des données de paires clé-valeur sur le navigateur. Par rapport aux cookies traditionnels, LocalStorage a une plus grande capacité de stockage (généralement 5 Mo) et une période de stockage plus longue (stockage permanent). Sans délai d'expiration, les données LocalStorage existeront toujours dans le navigateur de l'utilisateur et ne seront pas effacées même si le navigateur est fermé.

LocalStorage est très simple à utiliser. Nous pouvons utiliser JavaScript pour faire fonctionner LocalStorage, définir les données de la paire clé-valeur via la méthode setItem(), obtenir des données via la méthode getItem() et supprimer les données via la méthode removeItem(). Voici quelques exemples de codes de base :

// Définir les données LocalStorage
localStorage.setItem('name', 'David');
localStorage.setItem('age',

// Obtenir les données LocalStorage
); console.log(localStorage.getItem('name')); // Sortie : David
console.log(localStorage.getItem('age')); // Sortie : 28

// Supprimer les données LocalStorage
localStorage.removeItem ('name');
console.log(localStorage.getItem('name')); // Sortie : null

LocalStorage peut non seulement stocker des données de type chaîne, mais également d'autres types de données de base, tels que des nombres et une valeur booléenne. en attendant. LocalStorage peut également stocker des données de type objet, il suffit de convertir l'objet au format JSON. L'exemple de code est le suivant :

//Définir les données de l'objet LocalStorage
var user = {
nom : 'David',
âge : 28,
email : 'david@example.com'
};
localStorage.setItem( 'user' , JSON.stringify(user));

// Obtenir les données de l'objet LocalStorage
var stockéUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); Sortie : David
console.log(storedUser.age); // Sortie : 28
console.log(storedUser.email); // Sortie : david@example.com

Les données LocalStorage sont stockées dans des unités de nom de domaine, différentes LocalStorage les données sous un nom de domaine sont indépendantes. Cela signifie que dans le même navigateur, les pages Web sous des noms de domaine différents ne peuvent pas partager les données LocalStorage. Il s’agit de protéger la confidentialité et la sécurité des utilisateurs.

En plus de la configuration et de l'obtention simples de données, LocalStorage peut également surveiller les modifications des données. Grâce à la méthode addEventListener(), nous pouvons ajouter un écouteur d'événement de changement à LocalStorage Lorsque les données de LocalStorage changent, l'événement sera déclenché. L'exemple de code est le suivant :

// Surveiller les modifications des données LocalStorage
window.addEventListener('storage', function(e) {
console.log('LocalStorage data changes:', e.key, e.newValue);
}) ;

//Modifier les données LocalStorage
localStorage.setItem('name', 'Emily');
//Sortie de la console : modification des données LocalStorage : nom Emily

Résumé : LocalStorage est un mécanisme de stockage Web mystérieux et puissant , qui peut stocker et récupérer des données sur le navigateur. L'utilisation de LocalStorage est très simple et les données peuvent être facilement manipulées via les méthodes setItem(), getItem() et removeItem(). Les données LocalStorage sont stockées dans des unités de nom de domaine et les données LocalStorage sous différents noms de domaine sont indépendantes. Les modifications des données LocalStorage peuvent être surveillées via la méthode addEventListener(). L'utilisation de LocalStorage peut aider les développeurs à stocker et gérer les données plus facilement et à offrir une meilleure expérience utilisateur. J'espère que cet article vous aidera à décrypter LocalStorage !

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!