Zusammenfassung der H5-localStorage-Nutzung

Dieses Mal werde ich Ihnen eine Zusammenfassung der Verwendung von localStorage in H5 geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung von localStorage?

1. Was ist LocalStorage, SessionStorage

In HTML5 wird eine neue LocalStorage-Funktion hinzugefügt, diese Die Funktion wird hauptsächlich als lokaler Speicher verwendet, wodurch das Problem des unzureichenden Cookie-Speicherplatzes gelöst wird (der Speicherplatz jedes Cookies im Cookie beträgt im Allgemeinen 5 MB). Dies ist bei verschiedenen Browsern unterschiedlich wird anders sein.

Vorteile und Einschränkungen von localStorage

Vorteile von localStorage

1. LocalStorage-Erweiterung Überwindung der 4K-Grenze von Cookies

2. LocalStorage kann die ersten angeforderten Daten direkt lokal speichern. Dies entspricht einer 5M-Datenbank für Frontend-Seiten, kann jedoch Bandbreite sparen wird nur in Browsern höherer Versionen unterstützt

Einschränkungen von localStorage

1 Die Größe der Browser ist nicht einheitlich und in IE8 oder höher unterstützt nur die IE-Version den localStorage Attribut

2. Derzeit beschränken alle Browser den Werttyp von localStorage auf den String-Typ. Dies ist für unsere täglichen gängigen JSON-Objekttypen erforderlich

3. localStorage ist im Datenschutzmodus des Browsers nicht lesbar

4. localStorage ist im Wesentlichen ein Lesevorgang der -Zeichenfolge . Wenn viel Inhalt vorhanden ist, verbraucht es Speicherplatz und verursacht das Seite bleibt hängen

5. localStorage kann nicht von Crawlern gecrawlt werden

Der einzige Unterschied zwischen localStorage und sessionStorage besteht darin, dass localStorage ein permanenter Speicher ist, während sessionStorage der Schlüsselwert ist, wenn die Sitzung endet Paare im SessionStorage werden gelöscht

Hier verwenden wir localStorage zur Analyse

3. Verwendung von localStorage

Browserunterstützung für localStorage:

Eine besondere Aussage hier ist, dass, wenn Sie IE-Browser verwenden, UserData als Speicher erforderlich ist. Die Haupterklärung hier ist der Inhalt von localStorage. Daher wird userData nicht zu ausführlich erklärt. Nach Meinung des Bloggers besteht keine Notwendigkeit, die Verwendung von UserData zu erlernen, da der aktuelle IE6/IE7 veraltet ist und viele der heutigen Seitenentwicklungen neue Technologien wie Html5CSS3 beinhalten werden Daher sind wir im Allgemeinen nicht damit kompatibel, wenn wir es verwenden

Wenn wir localStorage verwenden, müssen wir zunächst den Browser bestimmen. Ob das LocalStorage-Attribut

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

LocalStorage-Schreiben unterstützt werden soll , es gibt drei Möglichkeiten, localStorage zu schreiben, hier werden nacheinander vorgestellt

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

Die Ergebnisse nach dem Ausführen sind wie folgt:

Hier ist zu beachten, dass auch die Verwendung von localStorage folgt die Same-Origin-Richtlinie, sodass verschiedene Websites nicht direkt denselben lokalen Speicher teilen können

Das auf der Konsole gedruckte Endergebnis ist:

Ich weiß nicht, ob den Lesern aufgefallen ist, dass das, was gerade gespeichert wurde war vom Typ int, wurde aber als String-Typ ausgegeben. Dies hängt mit den Eigenschaften von localStorage selbst zusammen und unterstützt nur die Speicherung vom String-Typ.

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

Es gibt drei Möglichkeiten, localStorage zu lesen, von denen die beiden offiziell empfohlenen Methoden getItemsetItem sind. Fragen Sie mich nicht warum , weil ich das auch nicht weiß

Ich habe vorher gesagt, dass localStorage einer Front-End-Datenbank entspricht. Die Datenbank besteht hauptsächlich aus vier Schritten: Hinzufügen, Löschen, Überprüfen und Ändern entsprechen den beiden Schritten Hinzufügen und Überprüfen

Lassen Sie uns nun über die beiden Schritte Löschen und Ändern von localStorage sprechen

Dieser Änderungsschritt ist leichter zu verstehen und die Idee Genau wie das erneute Ändern den Wert einer globalen Variablen, hier nehmen wir ein Beispiel, um es kurz zu erklären

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

Auf der Konsole können wir sehen, dass die a-Taste in 4 geändert wurde

localStorage的删除

1、将localStorage的所有内容清除

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

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

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

控制台查看结果

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

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

读取之后要将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对象

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

推荐阅读：

H5的存储方式详解

postMessage实现跨域、跨窗口消息传递

Das obige ist der detaillierte Inhalt vonZusammenfassung der H5-localStorage-Nutzung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!