Zusammenfassung der HTML5-LocalStorage-Wissenspunkte

Dieser Artikel enthält hauptsächlich eine Zusammenfassung der HTML5-LocalStorage-Wissenspunkte. In HTML5 wurde eine neue LocalStorage-Funktion hinzugefügt. Diese Funktion wird hauptsächlich als lokaler Speicher verwendet und löst das Problem des unzureichenden Cookie-Speicherplatzes (in Cookies). Der Speicherplatz jedes Cookies beträgt 4 KB. Im Allgemeinen unterstützen Browser eine Größe von 5 MB im lokalen Speicher. Dieser lokale Speicher unterscheidet sich in verschiedenen Browsern.

1. Was ist localStorage, sessionStorage? 🎜>In HTML5 wurde eine neue LocalStorage-Funktion hinzugefügt. Diese Funktion wird hauptsächlich als lokaler Speicher verwendet und löst das Problem des unzureichenden Cookie-Speicherplatzes (der Speicherplatz jedes Cookies beträgt 4 KB). Im Allgemeinen unterstützen Browser eine Größe von 5 MB im lokalen Speicher. Dieser lokale Speicher ist in verschiedenen Browsern unterschiedlich.

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 das localStorage-Attribut

2. Derzeit beschränken alle Browser den Werttyp von localStorage auf den String-Typ. Dies erfordert eine gewisse Konvertierung für unsere täglichen JSON-Objekttypen.

3 des Browsers

4. LocalStorage liest im Wesentlichen Zeichenfolgen, es verbraucht Speicherplatz und führt dazu, dass die Seite nicht gecrawlt werden kann Crawler

Der einzige Unterschied zwischen localStorage und sessionStorage besteht darin, dass localStorage zum permanenten Speicher gehört, während sessionStorage zum Schlüsselwert in sessionStorage gehört, wenn die Sitzung endet.

Hier verwenden wir localStorage zur Analyse

3. Die Verwendung von localStorage

localStorage Browser-Unterstützung:

A Die besondere Aussage hier ist, dass bei Verwendung eines IE-Browsers UserData als Speicher verwendet wird. Die Haupterklärung hierfür ist der Inhalt von localStorage, sodass userData nicht verwendet wird. Nach persönlicher Meinung des Bloggers gibt es keine Sie müssen die Verwendung von UserData erlernen, da sich der aktuelle IE6/IE7 in der Phase der Eliminierung befindet und viele Seitenentwicklungen heutzutage neue Technologien wie Html5CSS3 umfassen werden. Daher werden wir sie im Allgemeinen nicht kompatibel machen, wenn wir die oben genannten Zunächst müssen wir bei Verwendung von localStorage feststellen, ob der Browser das LocalStorage-Attribut

LocalStorage-Schreiben unterstützt. Es gibt drei Möglichkeiten, localStorage zu schreiben. Hier werden wir sie einzeln vorstellen

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

Die Ergebnisse nach dem Ausführen sind wie folgt:

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

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

Das auf der Konsole gedruckte Endergebnis ist:

Ich weiß nicht, ob den Lesern das aufgefallen ist Der gerade gespeicherte Typ war int, wurde jedoch 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

Es gibt drei Möglichkeiten, localStorage zu lesen, von denen die offiziell empfohlene die beiden ist Methoden getItemsetItem werden verwendet, um darauf zuzugreifen. Ich weiß das auch nicht.

Ich habe zuvor gesagt, dass localStorage einer Front-End-Datenbank entspricht , Löschungen und Änderungen. Diese vier Schritte, Lesen und Schreiben, entsprechen den beiden Schritten des Hinzufügens und Überprüfens

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

Lassen Sie uns nun über die beiden Schritte des Löschens und Änderns von localStorage sprechen

Ändern Schritt ist einfacher zu verstehen. Die Idee ist die gleiche wie das Ändern des Werts einer globalen Variablen. Hier werden wir ein Beispiel nehmen, um es kurz zu erklären In der Konsole können wir sehen, dass der a-Schlüssel in 4 geändert wurde

Löschen von localStorage

1 Alle Inhalte von localStorage löschen

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

2. Ein Schlüssel-Wert-Paar in localStorage löschen

Ergebnisse auf der Konsole anzeigen

Holen Sie sich den Schlüssel von localStorage

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

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

Verwenden Sie die Methode key() und betreten und verlassen Sie den Index, um den entsprechenden Schlüssel zu erhalten

4. Weitere Hinweise zu localStorage

Im Allgemeinen speichern wir JSON in localStorage, aber localStorage konvertiert localStorage automatisch in String-Form

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

Zu diesem Zeitpunkt können wir die Methode JSON.stringify() verwenden, um JSON in einen JSON-String umzuwandeln

Beispiel:

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五种循序渐进的使用方法

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