Sprechen Sie über die Fähigkeiten der lokalen HTML5-Speichertechnologie. HTML5-Tutorial

Lokales Caching ist eine neue Technologie, die in HTML5 entstand. Das Aufkommen dieser Technologie ermöglicht die Entwicklung des mobilen Webs. Wir alle wissen, dass es bei der Entwicklung einer leistungsstarken mobilen App auf Geschwindigkeit ankommt. Vor HTML5 konnten nur Cookies Daten speichern und ihre Größe betrug nur 4 KB. Dadurch wird die Speicherung von Anwendungsdateien stark eingeschränkt, was zu langen Ladezeiten für im Internet entwickelte mobile Anwendungen führt. Mit lokaler Speicherung können mobile Webanwendungen näher an nativen Anwendungen sein.

Im Browser wird der lokale Speicher über window.localStorage aufgerufen. Der Code zur Bestimmung, ob der Browser lokalen Speicher unterstützt, lautet wie folgt:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. if(window.localStorage){
2. warning('Dieser Browser unterstützt localStorage');
3. }sonst{
4. warning('Dieser Browser unterstützt NICHT localStorage');
5. } 

Wenn wir Daten lokal speichern möchten, ist die Fensterfunktion die einfachste Möglichkeit. Fügen Sie eine Eigenschaft zu localStorage hinzu und weisen Sie ihr einen Wert zu. Wenn wir beispielsweise einen Datennamen mit dem Wert Tom speichern möchten, können wir dies auf folgende Weise erreichen:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. window.localStorage.name = „Tom“

Beachten Sie hier, dass String-Variablen Anführungszeichen erfordern. Wenn wir die Daten aus dem lokalen Speicher abrufen möchten, können wir die Methode getItem verwenden. Der gesamte Codeprozess ist wie folgt:

JavaScript-CodeInhalt in die Zwischenablage kopieren

1. var storage = window.localStorage
2. storage.name = „Tom“;
3. //Namensdaten abrufen
4. var name1 = storage.getItem(“name”); alert(name1);
Das Anzeigeergebnis dieses Codes in der Chrome-Browserkonsole ist ein Eingabeaufforderungsfeld mit der Anzeige „Tom“. Es ist ersichtlich, dass wir auf diese Weise Daten korrekt gespeichert und gelesen haben.

Wenn wir diese gespeicherten Daten löschen möchten, können wir die Methode „removeItem“ verwenden. Fügen Sie dem obigen Code den folgenden Code hinzu:

JavaScript-Code

Inhalt in die Zwischenablage kopieren

storage.removeItem(“name”);

1. Wenn wir zu diesem Zeitpunkt erneut alarmieren, wird Null angezeigt, da die Daten gelöscht wurden.

   Nachdem wir einige grundlegende lokale Speichernutzung und Ideen verstanden haben, lassen Sie uns den lokalen Speicher systematisch einführen.

   Lokaler Speicher ist in drei Hauptkategorien unterteilt: localStorage/sessionStorage/lokale Datenbank

   Die Verwendung, Funktionen, Aufrufmethoden usw. von localStorage und sessionStorage sind gleich. Sie haben nur unterschiedliche Bedeutungen. Unter anderem sind die in localStorage gespeicherten Daten lange gültig, während die in sessionStorage gespeicherten Informationen beim Schließen jeder Sitzung zerstört werden (für Laien werden die Daten nach dem Schließen der Seite automatisch zerstört).

   Aufgrund der unterschiedlichen Eigenschaften der beiden sind auch die Anwendungsszenarien sehr unterschiedlich. Wenn wir einige Benutzerkonfigurationselemente und andere Dateninformationen speichern müssen, die über einen längeren Zeitraum gespeichert werden müssen, müssen wir normalerweise localStorgae zum Speichern verwenden und dabei die langlebigen Eigenschaften nutzen. Wenn wir sitzungsbasierte Funktionen wie Einkaufswagen implementieren müssen, müssen wir entsprechend sessionStorage verwenden.

   Da die Verwendung von localStorage und sessionStorage gleich ist, nehmen wir localStorage als Beispiel, um die Methoden der beiden vorzustellen.

   1. Datensatz festlegen
   Die Verwendung ist localStorage.setItem("key", "value"), was bedeutet, dass der Wert an key übergeben wird. (Die Verwendungsmethode von sessionStorage.setItem ist dieselbe und wird im Folgenden nicht einzeln vorgestellt.)

   2. Daten getItem abrufen
   Die Verwendung ist localStorage.getItem("key"). Solange Sie den entsprechenden Schlüsselwert eingeben, können Sie den entsprechenden Wertwert daraus abrufen.

   3. Löschen Sie bestimmte Daten. RemoveItem
   Die Verwendung lautet localStorage.removeItem(key), um die dem Schlüssel entsprechenden Daten zu löschen.

   4. Die Verwendung von clear
   ist localStorage.clear(), was bedeutet, dass alle Daten im Speichersystem gelöscht werden.

   Die oben genannten sind einige der grundlegendsten Verwendungen von sessionStorage/localStorage. Ich hoffe, dass sie für das Lernen aller hilfreich sein werden.