Comment utiliser localStorage et sessionStorage

Cette fois, je vais vous montrer comment utiliser localStorage et sessionStorage Comment utiliser localStorage et sessionStorage ? Quelles sont les précautions lors de l'utilisation de localStorage et sessionStorage Voici des cas pratiques, jetons un oeil.

1. Qu'est-ce que localStorage et 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 des cookieLe. problème d'espace de stockage insuffisant (l'espace de stockage de chaque cookie dans le 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.

2. Avantages et limites de localStorage

Avantages de localStorage

1. localStorage étend la limite de 4K des cookies

2. Les données d'une requête sont directement stockées localement, ce qui é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 pris en charge que dans les versions supérieures des navigateurs

Limitations de. localStorage

1. Les navigateurs ne sont pas de taille uniforme et seules les versions d'IE supérieures à IE8 prennent en charge l'attribut de localStorage

2. localStorage en type chaîne, ce qui nécessite une conversion pour nos types d'objets JSON courants quotidiens

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

4. LocalStorage lit essentiellement le . string. Si vous stockez trop de contenu, cela consommera de l'espace mémoire et bloquera la page.

5. localStorage ne peut pas être utilisé

La seule différence. entre localStorage et sessionStorage est que localStorage est un stockage permanent, tandis que sessionStorage est un stockage permanent. À la fin de la session, les paires clé-valeur 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 doit être faite ici, si vous utilisez

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, je suis venu ici pour apprendre l'utilisation. de UserData, car l'actuel IE6/IE7 est en phase d'élimination, et de nombreux développements de pages aujourd'hui impliqueront des technologies émergentes telles que HTML5CSS3, nous ne serons donc généralement pas compatibles avec lui lors de son utilisation

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{
            //主逻辑业务

localStorage的写入，localStorage的写入有三种方法，这里就一一介绍一下
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"]);
        }

Je ne sais pas si les lecteurs ont remarqué que le type int vient d'être stocké , mais il s'imprime. en tant que 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. La recommandation officielle est d'y accéder en utilisant getItemsetItem. Ne me demandez pas pourquoi, car je ne le fais pas. sachez cela

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. La lecture et l'écriture ici sont équivalentes aux deux étapes. d'ajout et de vérification

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

Cette étape de changement est plus facile à comprendre, et l'idée est la même que celle de re-modifier les variables globales. les valeurs sont les mêmes, nous prendrons ici 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);
        }

Je pense que vous maîtrisez la méthode après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur. le site php chinois !

Lecture connexe :

Comment faire fonctionner indexedDB en html5

Quelles sont les nouvelles fonctionnalités interactives de H5 et C3

À propos de la façon de gérer les anciennes versions de navigateurs incompatibles avec H5 et C3

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!