Vor H5 wurde hauptsächlich die Lagerung mit Keksen verwendet. Die Nachteile von Cookies sind mit Daten auf dem Anforderungskopf und die Größe innerhalb von 4K. Lord Domain Verschmutzung.
Hauptanwendungen: Einkaufswagen, Kundenlogin
Für den IE -Browser gibt es UserData, die Größe ist 64.000, nur vom IE -Browser unterstützt.
ZielSpeicher auf Schlüsselwert, dauerhafter Speicher, scheitern Sie nie, es sei denn, er wird manuell gelöscht.
Größe:Jeder Domain -Name 5m
Unterstützungssituation:Hinweis: IE9 LocalStorage unterstützt keine lokalen Dateien.
Erkennungsmethode: if (if (window.localStorage) {alert ('Dieser Browser unterstützt LocalStorage');} else {alert ('Dieser Browser unterstützt nicht lokalstorage');} Gemeinsame API:GetItem // Aufzeichnungen nehmen
SetItiten // Einstellungsdatensatz
REMETICEM // RETATE RETATE
Schlüssel // Nehmen Sie den dem Schlüssel entsprechenden Wert
klare // Aufzeichnungen löschen
Speicherinhalt:Array, Bilder, Json, Stil, Skript. Wesen Wesen (Solange es in einen String -Inhalt serialisiert werden kann, kann es gespeichert werden)
2. Lokale SpeichersitzstorageDie lokale Speicher -API von HTML5 entspricht dem SessionStorage.
3. Offline -Cache (Anwendungscache)Die für lokale Cache -Anwendungen erforderliche Datei
Wie man verwendet:① Manifestdatei konfigurieren
Seite:
<!Manifestierte Datei:
Manifest -Datei ist eine einfache Textdatei, die dem Browser mitteilt, dass der Cache -Inhalt (und der Inhalt, der nicht zwischenstrahlt).
Manifestierte Dateien können in drei Teile unterteilt werden:
① Cache Manifest -Die in diesem Titel aufgeführte Datei wird nach dem ersten Download zwischengespeichert
②Network -Die unter diesem Titel aufgeführten Dateien müssen mit dem Server verbunden werden, ohne zwischengespeichert zu werden
③ Fallback -Die in diesem Titel aufgeführten Dateien lassen vor, dass auf die Retreat -Seiten, die auf die Seite zugegriffen werden können, nicht zugegriffen werden können (z. B. Seite 404)
Vollständige Demo:Cache Manifest# 2016-07-24 v1.0.0/thema.css/main.jsnetwork: login.jsp Fallback: /html//offline.htmlAuf dem Server: Manifestdatei muss den richtigen MIME-Typ konfigurieren, dh Text/Cache-Manifest.
Wie Tomcat:
<mime-Mapping> <verteidigung> Manifest </Erweiterung> <mime-Type> Text/Cache-Manifest </mime-Type> </mime-Mapping >>Gemeinsame API:
Der Kern ist das ApplicationCache -Objekt.
0 (ungekocht): Kein Cache, dh kein Anwendungs -Cache in Bezug auf die Seite in Bezug auf die Seite
1 (Leerlauf): Leerlauf, dh der Anwendungscache wird nicht aktualisiert
2 (Überprüfung): Während des Schecks wird die Beschreibungsdatei heruntergeladen und die Aktualisierung überprüft
3 (Download): Im Download lädt der Anwendungs -Cache die in der Beschreibungsdatei angegebene Ressource herunter
4 (updateready): Aktualisiert wurden alle Ressourcen heruntergeladen
5 (Leerlauf): Verlassen, dh die Beschreibungsdatei des Anwendungs -Cache existiert nicht mehr, sodass die Seite nicht auf den Anwendungs -Cache zugreifen kann
Verwandte Ereignisse:Zeigt Änderungen in der Anwendung der Anwendung des Cache -Status an:
Überprüfung: Ausgelöst, wenn der Browser nach dem Anwendungs -Cache sucht
Fehler: Trigger beim Senden eines Fehlers beim Überprüfen oder Herunterladen von Ressourcen
NOUPDATE: Ausgelöst bei Überprüfung der Beschreibungsdatei und festgestellt, dass die Datei nicht geändert wird
Download: Ausgelöst beim Herunterladen der Anwendung von Cache -Ressourcen
Fortschritt: Im Prozess des Datei -Download -Anwendungs -Cache kontinuierlich ausgelöst
Updateready: Der neue Anwendungs -Cache -Download auf der Seite Triggers
zwischengespeichert: Trigger, wenn der Anwendungscache abgeschlossen ist
Drei Vorteile von Anwendungs -Cache:① Offline stöbern Sie
② Erhöhen Sie die Gesichtseinkommensgeschwindigkeit der Seite
③ den Serverdruck reduzieren
Notiz:
1. Die Kapazitätsgrenze des Browsers in den Cache -Daten ist möglicherweise nicht gleich (die Einschränkungen, die einige Browser festgelegt haben, betragen 5 MB pro Site).
2. Wenn die Manifestdatei oder eine in darin aufgeführte Datei nicht normal heruntergeladen werden können, wird der gesamte Aktualisierungsprozess als Fehler angesehen, und der Browser wird weiterhin den alten Cache verwenden
3.. Zitieren Sie das HTML des Manifestn
V.
5. Cache in der Manifest -Datei hat nichts mit Netzwerk und Fallback zu tun.
6. Die Ressourcen in Fallback müssen die gleiche wie die Manifest -Datei entsprechen
7. Nach der Aktualisierung der Version muss einmal aktualisiert werden, um die neue Version zu starten (die Situation der Seite wird einmal gebürstet) und die Überwachungsversion des Ereignisses muss hinzugefügt werden.
8. Auch wenn die anderen Seiten auf der Website nicht eingerichtet sind, kann auf die Anforderungsressource aus dem Cache im Cache zugegriffen werden
9. Wenn sich die Manifestdatei ändert, löst die Ressourcenanforderung selbst auch das Update aus
Der Unterschied zwischen Offline -Cache und herkömmlicher Browser -Cache:1. Der Offline -Cache ist für die gesamte Anwendung. Der Browser -Cache ist eine einzige Datei
2. Sie können die Seite öffnen, wenn Sie eine Offline -Cache -Trennung haben.
3. Der Offline -Cache kann den Browser aktiv benachrichtigen, um die Ressourcen zu aktualisieren
4.Web SQLRelationale Datenbank, Zugriff über SQL -Anweisung
Die Web SQL -Datenbank -API von Web SQL ist nicht Teil der HTML5 -Spezifikation, sondern eine unabhängige Spezifikation, die eine Reihe von APIs einführt, die SQL zum Betrieb von Client -Datenbanken verwendet.
Unterstützungssituation:Die Web SQL -Datenbank kann in der neuesten Version von Safari, Chrome und Opera Browser funktionieren.
Kernmethode: ①Pendatabase: Diese Methode verwendet vorhandene Datenbanken oder neue Datenbanken, um ein Datenbankobjekt zu erstellen. ②Transaction: Mit dieser Methode können wir eine Transaktion und eine Einreichung oder einen Rollback basierend auf dieser Situation steuern. ③ ExecutesQL: Diese Methode wird verwendet, um tatsächliche SQL -Abfragen durchzuführen. Öffnen Sie die Datenbank: var db = opendatabase ('mydb', '1.0', 'test db', 2 * 1024 * 1024, fn); // Opendatabase () 方法对应的五个参数分别为 ： ： 数据库名称、版本号、描述文本、 Datenbankgröße, Erstellungsaufruf Führen Sie den Abfragevorgang aus: Var db = opendatabase ('mydb', '1.0', 'test db', 2 * 1024 * 1024); Daten einfügen: Var db = opendatabase ('mydb', '1.0', 'test db', 2 * 1024 * 1024); 1, winzig) '); Daten lesen: DB.Transaction (Funktion (tx) {tx.executesql ('select * aus Win', [], Funktion (tx, resultation) {var len = results.rows.length, msg = <p> Abfragedatensatz Nummer: +len +</p>; }}, null);});Aus diesen Vorgängen, die im Grunde genommen SQL -Anweisungen verwenden, um Datenbank -bezogene Operationen auszuführen, sollte dies einfacher zu verwenden sein.
5.IndexeddbDie Indexdatenbank (IndexedB) -API (als Teil von HTML5) ist nützlich, um eine Offline -HTML5 -Webanwendung mit reichhaltigen Daten -intensiven Speicherdaten zu erstellen. Gleichzeitig hilft es auch lokale Cache -Daten, damit herkömmliche Online -Webanwendungen (z. B. mobile Webanwendungen) schneller ausgeführt und reagieren können.
Asynchrone API:Die meisten Operationen in indiziertenDB sind nicht unsere häufig verwendeten Aufrufmethoden, die die Ergebnisse des Ergebnisses zurückgeben, sondern die Art der Anfrage, z. B. das Öffnen des Datenbankvorgangs
Auf diese Weise haben wir beim Öffnen der Datenbank tatsächlich ein DB -Objekt zurückgegeben, und dieses Objekt war im Ergebnis. Wie aus der obigen Abbildung ersichtlich ist, mit Ausnahme des Ergebnisses. Mehrere wichtige Attribute sind OnError, Onsuccess, OnupgraReeded (wenn wir die Versionsnummer der Datenbank anfordern und die vorhandene Datenbankversionsnummer inkonsistent ist). Dies ähnelt unserer AJAX -Anfrage. Nachdem wir diese Anfrage initiiert haben, konnten wir nicht feststellen, wann sie erfolgreich war, daher müssen wir eine Logik im Rückruf verarbeiten.
Ausschalten und löschen: Funktion closedb (db) {db.close ();} Funktion deletedB (Name) {indexeddb.Deletedatabase (Name);}; Datenspeicherung:Es gibt kein Konzept in IndexedDB, aber ObjectStore kann mehrere Objekte enthalten. Mit anderen Worten, ein ObjectStore entspricht einer Tabelle, die jedem darin gespeicherten Datenstück zugeordnet ist.
Wir können in jedem Datensatz ein bestimmtes Feld als Schlüsselwerte (Tastatur) oder die automatische Generationszahl als Schlüsselwerte (KeyGenrator) oder nicht angegeben verwenden. Verschiedene Arten der Auswahl von Schlüsseln, die Datenstruktur, die ObjectStore speichern kann, kann ebenfalls gespeichert werden.
Das oben genannte ist der Inhalt dieses Artikels.