Zusammenfassung der Verwendung von localStorage und sessionStorage

In HTML5 wurde eine neue localStorage-Funktion hinzugefügt. Diese Funktion wird hauptsächlich als lokaler Speicher verwendet, um das Problem des unzureichenden Cookie-Speicherplatzes zu lösen (der Speicherplatz jedes Cookies im Cookie beträgt 4 KB). Allgemeine Browser in localStorage Die unterstützte Größe beträgt 5 MB . Dieser lokale Speicher ist in verschiedenen Browsern unterschiedlich.

1. localStorage erweitert das 4K-Limit von Cookies

2. LocalStorage kann die ersten angeforderten Daten direkt lokal speichern. Dies entspricht einer 5-Millionen-Datenbank für die Front-End-Seite und kann Bandbreite sparen. Dies ist jedoch nur in High-End-Browsern verfügbar

1. Browser haben keine einheitliche Größe und das localStorage-Attribut wird nur in IE-Versionen über IE8 unterstützt.

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

3. localStorage ist im Datenschutzmodus des Browsers nicht lesbar.

4. LocalStorage liest im Wesentlichen Zeichenfolgen. Wenn Sie viel Inhalt speichern, verbraucht es Speicherplatz und führt dazu, dass die Seite hängen bleibt.

5. localStorage kann nicht von Crawlern gecrawlt werden

Der einzige Unterschied zwischen localStorage und sessionStorage besteht darin, dass localStorage zum permanenten Speicher gehört, während sessionStorage zum sessionStorage gehört. Wenn die Sitzung endet, werden die Schlüssel-Wert-Paare in sessionStorage gelöscht.

Hier verwenden wir localStorage zur Analyse

Browserunterstützung für localStorage:

Eine besondere Aussage hier ist, dass UserData als Speicher verwendet werden, wenn Sie einen IE-Browser verwenden. Die Haupterklärung hierfür ist der Inhalt von localStorage, sodass userData nicht zu ausführlich erklärt wird und dies nach persönlicher Meinung des Bloggers nicht der Fall ist Es ist notwendig, die Verwendung von UserData zu erlernen, da sich der aktuelle IE6/IE7 in der Phase der Eliminierung befindet und viele Seitenentwicklungen heutzutage neue Technologien wie HTML5/CSS3 beinhalten, sodass wir sie aus Kompatibilitätsgründen im Allgemeinen nicht verwenden

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

 if(!window.localStorage){ Alert(Browser unterstützt Localstorage); return false }else{ //Hauptlogikgeschäft}

Es gibt drei Methoden zum Schreiben in localStorage. Hier stellen wir sie einzeln vor.

 if(!window.localStorage){ warning(browser unterstützt localstorage); return false; //Write a field storage[a]=1; //Write b field storage ; //Schreibe das c-Feld storage.setItem(c,3); console.log(typeof storage[a]); Lagerung[c]);

Das Ergebnis nach dem Ausführen ist wie folgt:

Hierbei ist zu beachten, dass auch die Verwendung von localStorage der Same-Origin-Richtlinie folgt, sodass verschiedene Websites nicht direkt denselben localStorage gemeinsam nutzen können.

Das auf der Konsole gedruckte Endergebnis ist:

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

Auslesen von localStorage

 if(!window.localStorage){ warning(browser unterstützt localstorage); }else{ var storage=window.localStorage; //Schreibe ein Feld storage.a=1 ; Schreiben Sie das c-Feld storage.setItem(c,3); console.log(typeof storage[a]); console.log(typeof storage[b]); storage[c]); //Die erste Methode liest var a=storage.log(a); //Die zweite Methode liest var b=storage[b]; Die dritte Methode liest var c=storage.getItem(c);

Es gibt drei Möglichkeiten, localStorage zu lesen. Die offiziell empfohlenen Methoden sind getItem/setItem. Fragen Sie mich nicht warum, weil ich es nicht weiß.

Ich habe bereits gesagt, dass localStorage einer Front-End-Datenbank entspricht. Die Datenbank besteht hauptsächlich aus vier Schritten: Hinzufügen, Löschen und Abfragen. Das Lesen und Schreiben entspricht hier den beiden Schritten Hinzufügen und Abfragen.

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

Das Ändern dieses Schritts ist einfacher zu verstehen. Die Idee ist dieselbe wie das Ändern des Werts einer globalen Variablen. Hier werden wir es kurz anhand eines Beispiels erläutern.

 if(!window.localStorage){ warning(browser unterstützt localstorage); }else{ var storage=window.localStorage; //Schreibe ein Feld storage.b=1 ; Schreiben Sie das c-Feld storage.setItem(c,3); console.log(storage.a); // console.log(typeof storage[a]); storage[b]); // console.log(typeof storage[c]); /*Separation line*/ storage.a=4;

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

Löschen von localStorage

1. Löschen Sie den gesamten Inhalt von localStorage

 var storage=window.localStorage; storage.setItem(c,3);

2. Löschen Sie ein Schlüssel-Wert-Paar in localStorage

 var storage=window.localStorage; storage.setItem(c,3); storage.removeItem(a);

Ergebnisse auf der Konsole anzeigen

Erwerb des LocalStorage-Schlüssels

 var storage=window.localStorage; storage.setItem(c,3); for(var i=0;i<storage.length;i++){ var key=storage.key(i); log(Schlüssel);

Verwenden Sie die Methode key(), um den entsprechenden Schlüssel durch Eingeben und Verlassen des Index abzurufen.

4. Weitere Überlegungen zu localStorage

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

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

Beispiel:

 if(!window.localStorage){ Alert(Browser unterstützt Localstorage); }else{ var storage=window.localStorage; var data={ name:'xiecanyong', sex:'man', hobby:'program' }; =JSON.stringify(data); storage.setItem(data,d); console.log(storage.data);

Verwenden Sie nach dem Lesen die Methode JSON.parse(), um die JSON-Zeichenfolge in ein JSON-Objekt zu konvertieren

 var storage=window.localStorage; var data={ name:'xiecanyong', sex:'man', hobby:'program' }; / JSON-Zeichenfolge in JSON-Objektausgabe konvertieren var json=storage.getItem(data); var jsonObj=JSON.parse(json); jsonObj);

Ausgedruckt ist ein Objektobjekt

Beachten Sie außerdem, dass andere Typen beim Lesen konvertiert werden müssen.