Maison >interface Web >Tutoriel H5 >Résumé des points de connaissances HTML5 localStorage
Cet article partage principalement avec vous un résumé des points de connaissances HTML5 localStorage. En HTML5, une nouvelle fonctionnalité localStorage a été ajoutée. Cette fonctionnalité est principalement utilisée comme stockage local et résout le problème d'espace de stockage insuffisant des cookies (dans les cookies Le stockage. l'espace de chaque cookie est de 4k). Généralement, les navigateurs prennent en charge une taille de 5M dans localStorage. Ce localStorage sera différent selon les navigateurs
1. Qu'est-ce que localStorage, sessionStorage
En HTML5, une nouvelle fonctionnalité localStorage est ajoutée. Cette fonctionnalité est principalement utilisée comme stockage local et résout le problème de l'espace de stockage insuffisant des cookies (chaque cookie dans l'espace de stockage d'un cookie est de 4k). Généralement, les navigateurs prennent en charge une taille de 5 Mo dans localStorage. Ce localStorage sera différent selon les navigateurs.
2. Avantages et limites de localStorage
Avantages de localStorage
1. Surmonter la limite de 4K des cookies
2. LocalStorage peut stocker les premières données demandées directement localement Cela équivaut à une base de données de 5 Mo pour les pages frontales, mais cela peut économiser de la bande passante. uniquement pris en charge dans les navigateurs de version supérieure
Limitations de localStorage
1 La taille des navigateurs n'est pas uniforme, et dans IE8 ou supérieur Seule la version IE prend en charge l'attribut localStorage.
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. du navigateur
4. LocalStorage lit essentiellement des chaînes. Si vous stockez beaucoup de contenu, cela consommera de l'espace mémoire et entraînera le changement de la page
5. crawlers
La seule différence entre localStorage et sessionStorage est que localStorage appartient au stockage permanent, tandis que sessionStorage appartient à la valeur clé de sessionStorage à la fin de la session. Les paires seront effacées
Ici, nous utilisons. localStorage à analyser
3. L'utilisation de localStorage
Support du navigateur localStorage :
A La 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 utilisé. De nombreuses explications, et de l'avis personnel du blogueur, il n'y en a pas. besoin d'apprendre à utiliser UserData, car l'IE6/IE7 actuel est en phase d'élimination, et de nombreux développements de pages aujourd'hui impliqueront des technologies émergentes telles que Html5CSS3, donc généralement nous ne le rendrons pas compatible lors de l'utilisation de ce qui précède
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("浏览器支持localstorage");
return false;
}else{
//主逻辑业务
}L'écriture LocalStorage Il existe trois façons d'écrire localStorage. Nous allons les présenter ici un par un
if(！window.localStorage){
alert("浏览器支持localstorage");
return false;
}else{
var storage=window.localStorage;
//写入a字段
storage["a"]=1;
//写入b字段
storage.a=1;
//写入c字段
storage.setItem("c",3);
console.log(typeof storage["a"]);
console.log(typeof storage["b"]);
console.log(typeof storage["c"]);
}Les résultats après exécution sont les suivants :
Il est à noter ici que l'utilisation de localStorage suit également la politique de même origine, donc différents sites Web ne peuvent pas partager directement le même stockage local
Le résultat final imprimé sur la console est :
Je ne sais pas si les lecteurs ont remarqué que ce qui était vient d'être stocké était de type int, mais il a été imprimé comme type de chaîne. Ceci est lié aux caractéristiques de localStorage lui-même. LocalStorage ne prend en charge que le stockage de type chaîne.
Lecture de localStorage
if(!window.localStorage){
alert("浏览器支持localstorage");
}else{
var storage=window.localStorage;
//写入a字段
storage["a"]=1;
//写入b字段
storage.a=1;
//写入c字段
storage.setItem("c",3);
console.log(typeof storage["a"]);
console.log(typeof storage["b"]);
console.log(typeof storage["c"]);
//第一种方法读取
var a=storage.a;
console.log(a);
//第二种方法读取
var b=storage["b"];
console.log(b);
//第三种方法读取
var c=storage.getItem("c");
console.log(c);
}Il existe trois façons de lire localStorage, parmi lesquelles celle officiellement recommandée est Les deux les méthodes getItemsetItem sont utilisées pour y accéder. Ne me demandez pas pourquoi, car je ne le sais pas non plus
J'ai déjà dit que localStorage est équivalent à une base de données frontale. La base de données est principalement utilisée pour les ajouts. , suppressions et modifications. Ces quatre étapes, lecture et écriture ici, sont équivalentes aux deux étapes d'ajout et de vérification
Parlons maintenant des deux étapes de suppression et de modification de localStorage
Changer cela. L'étape est plus facile à comprendre. L'idée est la même que changer la valeur d'une variable globale. Ici, nous prendrons un exemple pour expliquer brièvement
if(!window.localStorage){
alert("浏览器支持localstorage");
}else{
var storage=window.localStorage;
//写入a字段
storage["a"]=1;
//写入b字段
storage.b=1;
//写入c字段
storage.setItem("c",3);
console.log(storage.a);
// console.log(typeof storage["a"]);
// console.log(typeof storage["b"]);
// console.log(typeof storage["c"]);
/*分割线*/
storage.a=4;
console.log(storage.a);
}C'est activé. la console, nous pouvons voir que la clé a a été changée en 4
Suppression de localStorage
1 Effacer tout le contenu de localStorage
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.clear();
console.log(storage);2. Supprimer une paire clé-valeur dans localStorage
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.removeItem("a");
console.log(storage.a);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);
console.log(key);
}Utilisez la méthode key() et entrez et sortez de l'index pour obtenir la clé correspondante
4. Autres notes sur localStorage
Généralement, nous stockerons JSON dans localStorage, mais localStorage convertira automatiquement localStorage en forme de chaîne
À ce stade fois, nous pouvons utiliser la méthode JSON.stringify() pour convertir JSON en chaîne JSON
Exemple :
if(!window.localStorage){
alert("浏览器支持localstorage");
}else{
var storage=window.localStorage;
var data={
name:'xiecanyong',
sex:'man',
hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
console.log(storage.data);
}读取之后要将JSON字符串转换成为JSON对象，使用JSON.parse()方法
var storage=window.localStorage;
var data={
name:'xiecanyong',
sex:'man',
hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
//将JSON字符串转换成为JSON对象输出
var json=storage.getItem("data");
var jsonObj=JSON.parse(json);
console.log(typeof jsonObj);打印出来是Object对象
另外还有一点要注意的是，其他类型读取出来也要进行转换
相关推荐：
HTML5本地存储应用sessionStorage和localStorage
localStorage与sessionStorage五种循序渐进的使用方法
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!