suchen

Heim >Web-Frontend >H5-Tutorial >Ausführliche Erläuterung mehrerer Beispiele für die Speicherung von Daten auf dem Client durch HTML5

Ausführliche Erläuterung mehrerer Beispiele für die Speicherung von Daten auf dem Client durch HTML5

伊谢尔伦
伊谢尔伦Original
2017-05-30 10:40:482341Durchsuche

1.Anwendungscache

HTML5 führt den Anwendungscache ein, was bedeutet, dass Webanwendungen zwischengespeichert und auch ohne Netzwerk verwendet werden können.

Der Anwendungscache hat drei Eigenschaften

  • Offline-Browsing

  • Gespeicherte Ressourcen schneller Laden

  • Reduzieren Sie die Serverlast, der Browser lädt nur aktualisierte oder geänderte Ressourcen vom Server herunter

Wie Sie es verwenden, finden Sie unter Manifest hinzufügen Attribut

zum HTML-Tag Jede Seite mit einem angegebenen Manifest wird zwischengespeichert, wenn der Benutzer darauf zugreift. Wenn das Manifest-Attribut nicht angegeben ist, wird die Seite nicht zwischengespeichert (es sei denn, es wird direkt in der Manifestdatei angegeben).

Die empfohlene Dateierweiterung für Manifestdateien ist: „.appcache“. 


<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
   The content of the document......
</body>
</html>

Manifestdateien sind einfache Textdateien, die dem Browser mitteilen, was zwischengespeichert wird (und was nicht).

Manifestdateien können in drei Abschnitte unterteilt werden:

  • CACHE MANIFEST – die unter dieser Überschrift aufgeführten Dateien werden nach dem ersten Download zwischengespeichert

  • NETZWERK – Die unter dieser Überschrift aufgeführten Dateien erfordern eine Verbindung zum Server und werden nicht zwischengespeichert.

  • FALLBACK – Die unter dieser Überschrift aufgeführten Dateien erfordern eine Verbindung zur Seite unzugänglich (z. B. 404-Seite)

Eine vollständige Manifestdatei


CACHE MANIFEST  
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html5/ /404.html

2.localStorage & sessionStorage

HTML5 bietet zwei neue Möglichkeiten, Daten auf der Clientseite zu speichern:

  • localStorage – Datenspeicherung ohne zeitliche Begrenzung

  • sessionStorage – Datenspeicherung für eine Sitzung

Früher wurden diese alles durch Kekse erledigt. Cookies eignen sich jedoch nicht zum Speichern großer Datenmengen, da sie bei jeder Anfrage an den Server weitergeleitet werden, was Cookies langsam und ineffizient macht.

Sowohl localStorage als auch sessionStorage verfügen über dieselben Operationsmethoden, wie z. B. setItem(), getItem() und removeItem() usw.
Methoden von localStorage und sessionStorage:

setItem speichert den Wert
Zweck: Wert im Schlüsselfeld speichern
Verwendung: .setItem(key, value)
Codebeispiel:


sessionStorage.setItem("key", "value");
localStorage.setItem("site", "js8.in");

getItem, um den Wert abzurufen
Zweck: Den lokal gespeicherten Wert des angegebenen Schlüssels abrufen
Verwendung: .getItem(key)
Codebeispiel:


var value = sessionStorage.getItem("key"); 
var site = localStorage.getItem("site");

removeItem delete Schlüssel
Zweck: Den lokal gespeicherten Wert des angegebenen Schlüssels löschen
Verwendung: .removeItem(key)
Codebeispiel: 


sessionStorage.removeItem("key"); 
localStorage.removeItem("site");

clear Alle Schlüssel/Werte löschen
Zweck: Alle Schlüssel/Werte löschen
Verwendung: .clear()

sessionStorage ist kein dauerhafter Speicher und wird nach dem Schließen des Browsers gelöscht. LocalStorage wird für die dauerhafte lokale Speicherung verwendet, sofern die Daten nicht aktiv gelöscht werden.

3.indexDB

indexDB ist eine leichte NOSQL-Datenbank. Effizienter als Web-SQL (SQLite), einschließlich Indizierung, Transaktionsverarbeitung und robuster Abfragefunktionen.

Zu seinen Funktionen gehören:

  • Eine Website kann eine oder mehrere IndexedDB-Datenbanken haben, jede Datenbank muss einen eindeutigen Namen haben.

  • Eine Datenbank kann einen oder mehrere Objektspeicher enthalten. Ein Objektspeicher (eindeutig identifiziert durch einen Namen) ist eine Sammlung von Datensätzen. Jeder Datensatz hat einen Schlüssel und einen Wert. Der Wert ist ein Objekt, das eine oder mehrere Eigenschaften haben kann. Schlüssel können auf einem Schlüsselgenerator basieren, von einem Schlüsselpfad abgeleitet oder explizit festgelegt werden. Ein Schlüsselgenerator, der automatisch eindeutige aufeinanderfolgende positive Ganzzahlen generiert. Der Schlüsselpfad definiert den Pfad zum Schlüsselwert. Dabei kann es sich um einen einzelnen JavaScript-Bezeichner oder mehrere durch Punkte getrennte Bezeichner handeln. (Ähnlich wie die Eigenschaften einer Spaltendatenbank)

  • In IndexedDB verwenden fast alle Vorgänge die Methode command->request->result. Wenn Sie beispielsweise einen Datensatz abfragen, wird eine Anforderung zurückgegeben und das Abfrageergebnis im Ergebnis der Anforderung abgerufen. Ein weiteres Beispiel ist das Öffnen einer Datenbank, das Zurücksenden einer Anfrage und das Abrufen der zurückgegebenen Datenbankreferenz im Ergebnis der Anfrage.

  • indexedDB muss zur Ausführung auf dem Webserver platziert werden.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung mehrerer Beispiele für die Speicherung von Daten auf dem Client durch HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Was ist das Prinzip der Lebenslaufübertragung? So verwenden Sie HTML5, um einen Haltepunkt zum Fortsetzen des Hochladens von Dateien zu erreichenNächster Artikel：Was ist das Prinzip der Lebenslaufübertragung? So verwenden Sie HTML5, um einen Haltepunkt zum Fortsetzen des Hochladens von Dateien zu erreichen

In Verbindung stehende Artikel

Mehr sehen