Ausführliche Erläuterung mehrerer Beispiele für die Speicherung von Daten auf dem Client durch HTML5-H5-Tutorial-php.cn

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

伊谢尔伦

Freigeben： 2017-05-30 10:40:48

Original

2370 Leute haben es durchsucht

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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!