Zusammenfassung der HTML5-Speichermethoden-H5-Tutorial-php.cn

Dieser Artikel gibt Ihnen hauptsächlich eine Zusammenfassung der HTML5-Speichermethoden. Ich hoffe, er kann HTML5-Entwicklern helfen und allen dabei helfen, HTML5-Speichermethoden besser zu beherrschen.

Das wilde Wachstum von Cookies
Lokaler Speicher, lokaler Speicher
Lokaler Speicher, Sitzungsspeicher
Offline-Cache (Anwendungscache)
Web SQL
IndexedDB

Das barbarische Wachstum von Cookies

Vor dem Erscheinen von HTML5 besetzte Cookies die gesamte Welt der Client-Speicherung, genau wie das barbarische Wachstum der barbarischen Ära, cookies sehr gut und Erfüllen Sie schnell die Anforderungen praktischer Anwendungen. Aber auch die Probleme liegen auf der Hand. cookies wird Daten im Anforderungsheader enthalten, und die Größe ist auf 4 KB begrenzt. Dies ist sehr unsicher, kann von außen leicht abgefangen werden und es gibt auch domain Verschmutzung.

IE Der Browser spielt gerne seine eigenen Tricks, UserData um die Speicherkapazität zu erhöhen, und die Größe ist 64K. Andere Browser spielen jedoch nicht gerne damit Es ist das einzige, das eine Familie unterstützt.

Dann kommt hier der Punkt. Da cookies es so viele Probleme gibt, müssen wir Wege finden, sie zu lösen, sonst kommen wir nicht voran. Identifizieren Sie zunächst die Probleme und finden Sie dann Lösungen auf der Grundlage dieser Probleme.

Lösen Sie das 4K Speicherkapazitätsproblem
Lösen Sie das Problem von Anforderungsheadern mit Speicherinformationen, wodurch die Sicherheit durch verschlüsselte Kanäle erhöht werden soll oder Methode zur Datenspeicherung und -übertragung
Lösung des Problems der relationalen Speicherung
Browserübergreifend

Lokaler Speicher localstorage

Speichermethode

In Form von Schlüssel-Wert-Paaren gespeichert, dauerhaft gespeichert und nie ungültig gemacht, sofern nicht manuell gelöscht.

Speicherkapazität

pro Domainname5M.

Häufig verwendete APIs

getItem //Datensätze abrufen

setItem //Datensätze festlegen

removeItem //Datensatz entfernen

key //Den Wert abrufen, der key

clear entspricht //Datensatz löschen

Lokaler Speichersitzungsspeicher

und HTML5 im lokalen Speicher API von 🎜>localstorage sind gleich. Der Unterschied besteht darin, dass sessionstorage nach dem Schließen der Seite gelöscht wird, während sessionstorage immer gespeichert wird . Sofern nicht manuell gelöscht. localstorageOffline-Cache (Anwendungscache)

Lokaler Cache der von der Anwendung benötigten Dateien

Verwendung

1. Konfiguration

Datei manifest

Auf Seite:

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

Nach dem Login kopieren

Datei: manifest

ist die einfachste Textdatei, die über das Durchsuchen informiert vom Server zwischengespeichert werden (und was nicht zwischengespeichert wird). manifest

Die Datei ist in drei Teile unterteilt: manifest

– Die unter dieser Überschrift aufgeführten Dateien werden nach dem ersten heruntergeladen Caching CACHE MANIFEST
– Dateien unter diesem Titel erfordern eine Verbindung zum Server und werden nicht zwischengespeichert NETWOrK
– Dokumente unter Diese Überschrift gibt die Fallback-Seite an, wenn auf die Seite nicht zugegriffen werden kann (z. B. die Seite FALLBACK) 404

Vollständigdemo

CACHE MANIFEST
# 2016-07-24 v1.0.0
/theme.css
/main.js

NETWORK:
login.jsp

FALLBACK:
/html/ /offline.html

Nach dem Login kopieren

Auf dem Server: Die Datei muss mit dem richtigen manifest, also MIME-type, konfiguriert werden. text/cache-manifest

Häufig verwendet API

Der Kern ist das

-Objekt, das über ein applicationCache-Attribut verfügt, das den aktuellen Status des Anwendungscaches angibt: status

: Kein Cache, kein Anwendungscache im Zusammenhang mit der Seite 0 （UNCACHED）

: Inaktiv, der Anwendungscache wurde nicht aktualisiert 1 （IDLE）

: Überprüfung, Download Beschreibungsdatei und Suche nach Updates 2 （CHECKING）

: Beim Herunterladen lädt der Anwendungscache die in der Beschreibungsdatei angegebenen Ressourcen herunter 3 （DOWNLOADING）

: Das Update ist abgeschlossen, alle Ressourcen wurden heruntergeladen heruntergeladen 4 （UPDATEREADY）

: Abgebrochen, die Anwendungscache-Beschreibungsdatei ist nicht mehr vorhanden, sodass die Seite nicht mehr auf den Anwendungscache zugreifen kann 5 （IDLE）

Verwandte Ereignisse

zeigen Änderungen im Anwendungs-Cache-Status an:

: Wird ausgelöst, wenn der Browser nach Updates für den App-Cache sucht. checking

: Wird ausgelöst, wenn bei der Suche ein Fehler auftritt Aktualisierungen oder Herunterladen einer Ressource error

: Wird ausgelöst, wenn die Beschreibungsdatei überprüft wird und festgestellt wird, dass die Datei keine Änderungen aufweist. noupdate

: Wird ausgelöst, wenn mit dem Herunterladen von Anwendungs-Cache-Ressourcen begonnen wird downloading

: Kontinuierlicher Download während des Datei-Download-Anwendungscache. Ausgelöst, wenn progress

: Wird ausgelöst, wenn der neue Anwendungscache der Seite heruntergeladen wurde updateready

: Wird ausgelöst, wenn der Anwendungscache vollständig verfügbar ist cached

Drei Vorteile: application cache

离线浏览
提升页面载入速度
降低服务器压力

注意事项：

浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点5M）
如果是manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用旧的缓存
引用manifest的html必须与manifest文件同源，在同一个域下
浏览器会自动缓存引用manifest文件的html文件，这就导致了如果更改了html内容，也需要更新版本才能做到最新
manifest文件中的CACHE与NETWOrK、FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面
FALLBACK中的资源必须和manifest文件同源
更新完版本后，必须刷新一次才会启动新版本（会出现重刷一次页面的情况），需要添加监听版本事件
站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问
当manifest文件发生改变时，资源请求本身也会触发更新

离线缓存和传统浏览器缓存的区别

离线缓存是针对整个应用，浏览器缓存是单个文件
离线缓存可以主动通知浏览器更新资源

Web SQL

Web SQL数据库API并不是HTML5规范的一部分，但它是一个独立的规范，引入了一组使用SQL操作客户端数据库的APIs。

核心方法

openDatabase：使用现有的数据库或新建的数据库创建一个数据库对象
transaction：控制一个事务，以及基于这种情况执行提交或回滚
executeSql：用于执行实际的SQL查询

打开数据库

var db = openDatabase('mydb', '1.0', 'TEST DB', 2 * 1024 * 1024, fn);

Nach dem Login kopieren

执行查询操作

var db = openDatabase('mydb', '1.0', 'TEST DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
})

Nach dem Login kopieren

插入数据

注：博客主题里的代码块样式

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
   tx.executeSql('INSERT INTO WIN (id, name) VALUES (1, "winty")');
   tx.executeSql('INSERT INTO WIN (id, name) VALUES (2, "LuckyWinty")');
});

Nach dem Login kopieren

注：需要实现的代码块样式，这个是 markdowpad2 里的操作，也是很多markdown写作工具提供的操作，只需要按一下 tab 键，非常方便

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
   tx.executeSql('INSERT INTO WIN (id, name) VALUES (1, "winty")');
   tx.executeSql('INSERT INTO WIN (id, name) VALUES (2, "LuckyWinty")');
});

Nach dem Login kopieren

读取数据

db.transaction(function (tx) {
   tx.executeSql('SELECT * FROM WIN', [], function (tx, results) {
      var len = results.rows.length, i;
      msg = "<p>查询记录条数: " + len + "</p>";
      document.querySelector('#status').innerHTML +=  msg;

      for (i = 0; i < len; i++){
         alert(results.rows.item(i).name );
      }

   }, null);
});

Nach dem Login kopieren