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中LocalStorage本地存储的示例

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!