Explication détaillée des points clés de l'utilisation de localStorage dans les compétences JavaScript_javascript

localStorage est principalement utilisé pour remplacer les cookies et résoudre les problèmes de difficulté de lecture et d'écriture et de capacité limitée des cookies (veuillez vous référer aux Points clés pour l'utilisation des cookies).

localStorage a les fonctionnalités suivantes

1.localStorage est un objet commun et les opérations sur n'importe quel objet sont applicables.

2. La valeur de l'attribut de l'objet localStorage ne peut être qu'une chaîne.

Cela nécessite une attention particulière. Supposons que nous souhaitions enregistrer un objet dans localStorage. Nous pouvons utiliser le spissage. Comme

var obj = {
"na=me": "chua",
age: 9
}
//拼接到localStorage
var str = "";
for(var i in obj){
str += encodeURIComponent(i) + "=" + encodeURIComponent(obj[i]) + ";"
}
str = str.substring(0,str.length - 1);
localStorage.testObj = str;
//解析出来
var strA = localStorage.testObj.split(";");
var newObj = {};
for(var i = 0; i < strA.length; i++){
var tmp = strA[i].split("=");
newObj[decodeURIComponent(tmp[0])] = decodeURIComponent(tmp[1]);
}

Bien sûr, vous pouvez également utiliser la classe JSON pour convertir l'objet en chaîne et l'enregistrer, puis convertir la chaîne json en un format d'objet json vraiment utilisable lors de sa suppression

3. La taille d'espace par défaut prise en charge par localStorage est de 5 Mo, ce qui est bien pris en charge par les navigateurs modernes

Emprunter la découpe de stockage local HTML5 LocalStorage de xiaowei0705

Script House rappelle à tout le monde de noter que c'est que lorsque vous l'utilisez sur un téléphone mobile, vous devez ouvrir de l'espace mémoire en arrière-plan pour le prendre en charge.

"QUOTA_EXCEEDED_ERR" est une exception Si la capacité de stockage que vous utilisez dépasse la limite (5M), cette exception sera signalée

4.localStorage lui-même a des méthodes

Ajouter une paire clé-valeur : localStorage.setItem(key,value)

Obtenir la valeur de la clé : localStorage.getItem(key)

Supprimer les paires clé-valeur : localStorage.removeItem(key).

Effacez toutes les paires clé-valeur : localStorage.clear().

Obtenez le nom de la propriété (nom de la clé) de localStorage : localStorage.key(index).

Il existe également une longueur de propriété différente des objets ordinaires :

Obtenez le nombre de paires clé-valeur enregistrées dans localStorage : localStorage.length.

L'exemple suivant est utilisé pour obtenir la paire clé-valeur de localStorage

for(var i=0;i<localStorage.length;i++){
console.log(localStorage.key(i)+ " : " + localStorage.getItem(localStorage.key(i)));
} 

Basées sur le principe de confiance dans les méthodes natives, les méthodes natives doivent être utilisées autant que possible pour faire fonctionner localStorage. Cependant, il arrive parfois qu'une étrange erreur QUOTA_EXCEEDED_ERR se produise lors de l'appel de setItem() sur iPhone/iPad. La solution est de supprimerItem() avant setItem. Donc, à en juger par ce problème de compatibilité, il semble que l'utilisation d'objets pour ajouter/supprimer des paires clé-valeur soit plus pratique et plus compatible.

5.événement localStorage

L'événement de stockage de localStorage ne peut pas annuler l'action de stockage dans le gestionnaire d'événement de stockage.

L'événement de stockage est simplement une notification que le navigateur vous envoie après les modifications des données localStorage. Notez que la condition ici est que les données aient réellement changé. En d’autres termes, si la zone de stockage actuelle est vide, l’événement ne sera pas déclenché si vous appelez à nouveau clear(). Ou si vous utilisez setItem() pour définir une valeur identique à la valeur existante, l'événement ne sera pas déclenché. Il sera déclenché lorsque la zone de stockage change. Ceci contient de nombreuses propriétés utiles :

•storageArea : Indique le type de stockage (Session ou Local)
•key : la clé de l'élément modifié
•oldValue : la valeur originale de la clé
•newValue : nouvelle valeur de la clé
•url* : URL où le changement de clé se produit

Remarque : L'attribut url était l'attribut uri dans les premières spécifications. Certains navigateurs ont été publiés plus tôt et n'incluaient pas cette modification. Pour des raisons de compatibilité, avant d'utiliser l'attribut url, vous devez d'abord vérifier s'il existe. S'il n'y a pas d'attribut url, vous devez utiliser l'attribut uri
.

PS : Le stockage et la lecture sont normaux dans Firefox et Chrome, mais il semble y avoir un problème avec le déclenchement des événements de stockage. Chrome peut déclencher l'événement de stockage de cette page en modifiant la propre page de Firefox qui ne déclenche pas la fenêtre. après avoir modifié l'événement de stockage, mais lors de l'accès à A.html et B.html en même temps, l'exécution de setItem sur la page A peut déclencher l'événement de stockage de la fenêtre de la page B. De même, l'exécution de setItem sur la page B peut déclencher l'événement de stockage. événement de stockage de la fenêtre sur la page A. Dans IE9, la valeur de paramètre de la page elle-même peut déclencher l'événement de stockage de la page actuelle, et la valeur de paramètre de la page actuelle peut également déclencher l'événement de stockage d'autres fenêtres de page sous la même "origine". Cela semble plus raisonnable. Par exemple, PrimeTechBlog est recommandé. Le premier essai de WebStorage-localstorage
.

Par conséquent, il est recommandé d'écrire des fonctions de traitement compatibles pour les navigateurs compatibles ou tout simplement de ne pas utiliser l'événement de stockage.

Exemple

if (window.addEventListener) {
window.addEventListener("storage", handle_storage, false);
} else {
window.attachEvent("onstorage", handle_storage);
};
function handle_storage(e) {
if (!e) { e = window.event; }
//响应代码部分 ...
} 

Quelques petits points :

LocalStorage doit être accessible via un nom de domaine pour fonctionner

Si la méthode clear() est appelée, key, oldValue et newValue seront toutes définies sur null.

LocalStorage s'utilise de la même manière

•localStorage - stockage de données sans limite de temps
•sessionStorage - Stockage des données pour une session

localStorage propose plusieurs méthodes :

1. Stockage : localStorage.setItem(clé, valeur)

Si la clé existe, mettez à jour la valeur

2. Obtenez : localStorage.getItem(key)

Si la clé n'existe pas, renvoie null

3. Supprimer : localStorage.removeItem(key)

Une fois supprimées, toutes les données correspondant à la clé seront supprimées

4. Effacer tout : localStorage.clear()

Parfois, il est trop difficile d'utiliser RemoveItem pour supprimer un par un. Vous pouvez utiliser clear, qui effacera toutes les données enregistrées par l'objet localStorage

.

5. Parcourez les clés stockées dans localStorage

.length La quantité totale de données, par exemple : localStorage.length
.key(index) obtient la clé, par exemple : var key=localStorage.key(index);

6. Stocker les données au format JSON

JSON.stringify(data) Convertit un objet en chaîne de données au format JSON et renvoie la chaîne convertie
JSON.parse(data) analyse les données en objets et renvoie l'objet analysé

Remarque : les données stockées dans localStorage ne peuvent pas être partagées entre les navigateurs. Un navigateur ne peut lire que les données de son propre navigateur et l'espace de stockage est de 5 Mo.