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
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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1377
52
Tabellenrahmen in HTML
Sep 04, 2024 pm 04:49 PM
Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.
HTML-Rand links
Sep 04, 2024 pm 04:48 PM
Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.
Verschachtelte Tabelle in HTML
Sep 04, 2024 pm 04:49 PM
Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.
HTML-Tabellenlayout
Sep 04, 2024 pm 04:54 PM
Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.
HTML-geordnete Liste
Sep 04, 2024 pm 04:43 PM
Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele
HTML-Eingabeplatzhalter
Sep 04, 2024 pm 04:54 PM
Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.
Text in HTML verschieben
Sep 04, 2024 pm 04:45 PM
Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.
HTML-Onclick-Button
Sep 04, 2024 pm 04:49 PM
Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.
