Résumé de l'utilisation de H5 localStorage-Tutoriel H5-php.cn

Cette fois, je vais vous apporter un résumé de l'utilisation de localStorage dans H5. Quelles sont les précautions lors de l'utilisation de localStorage. Voici des cas pratiques, jetons un coup d'œil.

1. Qu'est-ce que localStorage, sessionStorage

En HTML5, une nouvelle fonctionnalité localStorage est ajoutée, cette La fonctionnalité est principalement utilisée comme stockage local, ce qui résout le problème de l'espace de stockage insuffisant des cookies (l'espace de stockage de chaque cookie dans le cookie est de 4 Ko). Généralement, les navigateurs prennent en charge une taille de 5 Mo dans localStorage. sera différent.

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 localStorage <.> attribut

2. Actuellement, tous les navigateurs limitent le type de valeur de localStorage au type de chaîne Ceci est requis pour nos types d'objets JSON courants quotidiens

3. localStorage n'est pas lisible dans le mode de confidentialité du navigateur

4. localStorage est essentiellement une lecture de la

chaîne . S'il y a beaucoup de contenu, cela consommera de l'espace mémoire et provoquera le problème. page à rester bloquée

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

La seule différence entre localStorage et sessionStorage est que localStorage est un stockage permanent, tandis que sessionStorage Lorsque la session se termine, la valeur-clé les paires dans sessionStorage seront effacées

Ici, nous utilisons localStorage pour analyser

3. Utilisation de localStorage

Prise en charge du navigateur pour localStorage :

Une déclaration spéciale ici est que si vous utilisez le

navigateur IE, alors UserData est requis En tant que stockage, l'explication principale ici est le contenu de localStorage, donc userData ne sera pas trop expliqué. De l'avis personnel du blogueur, il n'est pas nécessaire d'apprendre à utiliser UserData, car l'actuel IE6/IE7 est obsolète et de nombreux développements de pages actuels impliqueront des technologies émergentes telles que Html5CSS3. , donc généralement nous ne serons pas compatibles avec lui lors de son utilisation

Tout d'abord, lors de l'utilisation de localStorage, nous devons déterminer si le navigateur doit prendre en charge l'attribut localStorage

if(！window.localStorage){
            alert("浏览器支持localstorage");
            return false;
        }else{
            //主逻辑业务
        }

Copier après la connexion

Écriture LocalStorage , il existe trois façons d'écrire localStorage, présentées ici une par une

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"]);
        }

Copier après la connexion

Les résultats après exécution sont les suivants :

Il convient de 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 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);
        }

Copier après la connexion

Il existe trois façons de lire localStorage, parmi lesquelles les deux méthodes officiellement recommandées sont getItemsetItem Take, ne me demandez pas pourquoi. , parce que 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 se compose principalement de quatre étapes d'ajout, de suppression, de vérification et de modification. sont équivalents aux deux étapes d'ajout et de vérification

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

Cette étape de modification est plus facile à comprendre et l'idée Tout comme re-changer la valeur d'une variable globale, nous allons ici prendre 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);
        }

Copier après la connexion

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

localStorage的删除

1、将localStorage的所有内容清除

var storage=window.localStorage;
            storage.a=1;
            storage.setItem("c",3);
            console.log(storage);
            storage.clear();
            console.log(storage);

Copier après la connexion

2、将localStorage中的某个键值对删除

var storage=window.localStorage;
            storage.a=1;
            storage.setItem("c",3);
            console.log(storage);
            storage.removeItem("a");
            console.log(storage.a);

Copier après la connexion

控制台查看结果

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);
            }

Copier après la connexion

使用key()方法，向其中出入索引即可获取对应的键

四、localStorage其他注意事项

一般我们会将JSON存入localStorage中，但是在localStorage会自动将localStorage转换成为字符串形式

这个时候我们可以使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串

示例：

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);
        }

Copier après la connexion

读取之后要将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);

Copier après la connexion

打印出来是Object对象

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！