So verwenden Sie localStorage und sessionStorage

Dieses Mal zeige ich Ihnen, wie Sie localStorage und SessionStorage verwenden. Wie verwende ich LocalStorage und SessionStorage? Was sind die Vorsichtsmaßnahmen bei der Verwendung von localStorage und sessionStorage? Hier sind praktische Fälle, schauen wir uns das an.

1. Was ist LocalStorage und SessionStorage? Problem des unzureichenden Speicherplatzes (der Speicherplatz jedes Cookies im Cookie beträgt 4 KB). Im Allgemeinen unterstützen Browser eine Größe von 5 MB. Dieser lokale Speicher ist in verschiedenen Browsern unterschiedlich.

2. Vorteile und Einschränkungen von localStorageVorteile von localStorage

1. localStorage erweitert das 4K-Limit von Cookies

2 Die Daten einer Anfrage werden direkt lokal gespeichert, was einer 5M-Datenbank für die Front-End-Seite entspricht. Im Vergleich zu Cookies kann dadurch Bandbreite gespart werden, dies wird jedoch nur in Browsern höherer Versionen unterstützt

Einschränkungen von localStorage

1. Browser haben keine einheitliche Größe und nur IE-Versionen über IE8 unterstützen das

Attribut von localStorage

2. Derzeit beschränken alle Browser den Werttyp von localStorage in den String-Typ, was eine gewisse Konvertierung für unsere alltäglichen JSON-Objekttypen erfordert3 localStorage ist im Datenschutzmodus des Browsers nicht lesbar

4 string

. Wenn Sie zu viel Inhalt speichern, wird Speicherplatz verbraucht und die Seite bleibt hängen.

Der Crawler kann nicht verwendet werden.

Der einzige Unterschied Zwischen localStorage und sessionStorage besteht, dass localStorage ein permanenter Speicher ist, während sessionStorage ein permanenter Speicher ist. Wenn die Sitzung endet, werden die Schlüssel-Wert-Paare in sessionStorage gelöscht

Hier verwenden wir localStorage zur Analyse

3. Verwendung von localStorage

Browser-Unterstützung für localStorage:

Eine besondere Aussage sollte hier gemacht werden, wenn Sie

IE-Browser verwenden

, dann werden UserData als Speicher verwendet. Die Haupterklärung hier ist der Inhalt von localStorage, daher wird userData nicht zu viel erklärt, und nach der persönlichen Meinung des Bloggers ist es nicht notwendig, die Verwendung zu lernen UserData, da sich der aktuelle IE6/IE7 in der Eliminierungsphase befindet und viele Seitenentwicklungen heutzutage neue Technologien wie HTML5CSS3 beinhalten werden, sodass wir bei der Verwendung im Allgemeinen nicht damit kompatibel sind

Zunächst einmal: Wenn wir localStorage verwenden, müssen wir feststellen, ob der Browser das localStorage-Attribut unterstützt.

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

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

Es gibt drei Möglichkeiten, localStorage mit getItemsetItem zu lesen. Fragen Sie mich nicht, warum Wissen Sie darüber

Ich habe zuvor gesagt, dass localStorage einer Front-End-Datenbank entspricht. Die Datenbank besteht hauptsächlich aus vier Schritten: Hinzufügen, Löschen, Überprüfen und Ändern. Das Lesen und Schreiben entspricht hier 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);
        }

Sprechen wir über die beiden Schritte des Löschens und Änderns von localStorage

Dieser Schritt des Änderns ist einfacher zu verstehen und die Idee ist dieselbe wie das erneute Ändern globaler Variablen Werte sind die gleichen, hier werden wir ein Beispiel nehmen, um es kurz zu erklären

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln die chinesische PHP-Website!

Verwandte Lektüre:

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

So bedienen Sie indexedDB in HTML5

Was sind die neuen interaktiven Funktionen von H5 und C3

So gehen Sie mit alten Versionen von Browsern um, die nicht mit H5 und C3 kompatibel sind

Das obige ist der detaillierte Inhalt vonSo verwenden Sie localStorage und sessionStorage. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!