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

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

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

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

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

Lesen von localStorage

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

Löschen von localStorage

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

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

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

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

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!