Résumé de l'utilisation de localStorage et sessionStorage

En HTML5, une nouvelle fonctionnalité localStorage est ajoutée. Cette fonctionnalité est principalement utilisée comme stockage local pour résoudre le problème d'espace de stockage insuffisant des cookies (l'espace de stockage de chaque cookie dans le cookie est de 4 Ko. Navigateurs généraux dans localStorage La taille prise en charge est de 5 Mo). . Ce localStorage sera différent selon les navigateurs.

1. localStorage étend la limite 4K des cookies

2. LocalStorage peut stocker directement les premières données demandées localement. Cela équivaut à une base de données de 5 Mo pour la page frontale. Par rapport aux cookies, cela peut économiser de la bande passante, mais cela n'est disponible que dans les navigateurs haut de gamme pris en charge par Zhongcai.

1. Les navigateurs ne sont pas de taille uniforme et l'attribut localStorage n'est pris en charge que dans les versions d'IE supérieures à IE8.

2. Actuellement, tous les navigateurs limitent le type de valeur de localStorage au type de chaîne. Cela nécessite une certaine conversion pour nos types d'objets JSON courants quotidiens.

3. localStorage n'est pas lisible en mode confidentialité du navigateur.

4. LocalStorage lit essentiellement des chaînes Si vous stockez beaucoup de contenu, cela consommera de l'espace mémoire et bloquera la page.

5. localStorage ne peut pas être exploré par les robots d'exploration

La seule différence entre localStorage et sessionStorage est que localStorage appartient au stockage permanent, tandis que sessionStorage appartient à sessionStorage. À la fin de la session, les paires clé-valeur de sessionStorage seront effacées.

Ici, nous utilisons localStorage pour analyser

Prise en charge du navigateur pour localStorage :

Une déclaration spéciale ici est que si vous utilisez le navigateur IE, alors UserData sera utilisé comme stockage. L'explication principale ici est le contenu de localStorage, donc userData ne sera pas trop expliqué et, de l'avis personnel du blogueur, il n'y en a pas. Il est nécessaire d'apprendre à utiliser UserData, car l'actuel IE6/IE7 est en phase d'élimination, et de nombreux développements de pages impliquent aujourd'hui des technologies émergentes telles que HTML5/CSS3, nous ne les utilisons donc généralement pas pour des raisons de compatibilité.

Tout d’abord, lors de l’utilisation de localStorage, nous devons déterminer si le navigateur prend en charge l’attribut localStorage.

 if(!window.localStorage){ alert (le navigateur prend en charge le stockage local); return false }else{ //Logique principale}

Il existe trois méthodes pour écrire sur localStorage. Nous les présenterons ici une par une.

 if(!window.localStorage){ alert(le navigateur prend en charge localstorage); return false; }else{ var storage=window.localStorage; //Écrit un champ storage[a]=1; ; //Écrire le champ c storage.setItem(c,3); console.log(typeof storage[a]); stockage[c]); }

Le résultat après exécution est le suivant :

Il convient de noter ici que l'utilisation de localStorage suit également la politique de même origine, de sorte que différents sites Web ne peuvent pas partager directement le même localStorage.

Le résultat final imprimé sur la console est :

Je ne sais pas si des lecteurs ont remarqué que ce qui venait d'être stocké était de type int, mais il a été imprimé sous forme de chaîne. Ceci est lié aux caractéristiques de localStorage lui-même qui ne prend en charge que le stockage de type chaîne.

Lecture de localStorage

 if(!window.localStorage){ alert(le navigateur prend en charge localstorage); }else{ var storage=window.localStorage; //Écrire un champ storage[a]=1; Écrivez le champ c storage.setItem(c,3); console.log(typeof storage[a]); storage[c]); //La première méthode lit var a=storage.a; console.log(a); //La deuxième méthode lit var b=storage[b]; la troisième méthode lit var c=storage.getItem(c); console.log(c);

Il existe trois façons de lire localStorage. Les méthodes officiellement recommandées sont getItem/setItem pour y accéder. Ne me demandez pas pourquoi, car je ne sais pas.

J'ai déjà dit que localStorage est équivalent à une base de données frontale. La base de données se compose principalement de quatre étapes : l'ajout, la suppression et l'interrogation. La lecture et l'écriture ici sont équivalentes aux deux étapes d'ajout et d'interrogation.

Parlons maintenant des deux étapes de suppression et de modification de localStorage.

Changer cette étape est plus facile à comprendre. L'idée est la même que changer la valeur d'une variable globale. Ici, nous utiliserons un exemple pour l'expliquer brièvement.

 if(!window.localStorage){ alert(le navigateur prend en charge localstorage); }else{ var storage=window.localStorage; //Écrire un champ storage[a]=1; //Écrire un champ storage.b=1 ; Écrivez le champ c storage.setItem(c,3); console.log(storage.a); // console.log(typeof storage[a]); stockage[b]); // console.log(typede stockage[c]); /*Ligne de séparation*/storage.a=4;

Sur la console, on peut voir que la clé a a été changée en 4.

Suppression du stockage local

1. Effacez tout le contenu de localStorage

 var storage=window.localStorage; storage.a=1; storage.setItem(c,3);

2. Supprimez une paire clé-valeur dans localStorage

 var storage=window.localStorage; storage.a=1; storage.setItem(c,3);

Afficher les résultats sur la console

acquisition de clé localStorage

 var storage=window.localStorage; storage.a=1; storage.setItem(c,3); for(var i=0;i<storage.length;i++){ var key=storage.key(i); journal(clé);}

Utilisez la méthode key() pour obtenir la clé correspondante en entrant et en sortant de l'index.

4. Autres considérations pour le stockage local

Généralement, nous stockerons JSON dans localStorage, mais localStorage convertira automatiquement localStorage sous forme de chaîne.

À l'heure actuelle, nous pouvons utiliser la méthode JSON.stringify() pour convertir JSON en chaîne JSON.

Exemple:

 if(!window.localStorage){ alert(le navigateur prend en charge localstorage); }else{ var storage=window.localStorage; var data={ name:'xiecanyong', sex:'man', hobby:'program' }; =JSON.stringify(données); stockage.setItem(données,d); console.log(stockage.données });

Après lecture, pour convertir la chaîne JSON en objet JSON, utilisez la méthode JSON.parse()

 var storage=window.localStorage; var data={ nom:'xiecanyong', sexe:'man', hobby:'program' }; var d=JSON.stringify(data.setItem(data,d); /Convertir la chaîne JSON en sortie d'objet JSON var json=storage.getItem(data); var jsonObj=JSON.parse(json console.log(typeof); jsonObj);

L'imprimé est un objet Objet

Une autre chose à noter est que les autres types doivent être convertis lors de leur lecture.