Lokaler HTML5-Speicher IndexedDB

Dieser Artikel stellt hauptsächlich den lokalen Speicher IndexedDB von HTML5 vor, der einen gewissen Referenzwert hat. Jetzt kann ich ihn mit allen teilen, die ihn benötigen.

IndexedDB ist eine Low-Level-API für Kunden. Der Client speichert große Mengen strukturierter Daten (einschließlich Dateien/Blobs). Der folgende Artikel konzentriert sich darauf, Ihnen die relevanten Kenntnisse von IndexedDB für die lokale HTML5-Speicherung näher zu bringen.

IndexedDB ist eine Low-Level-API, die für die clientseitige Speicherung großer Mengen verwendet wird Strukturierte Daten (einschließlich Dateien/Blobs). Die API verwendet Indizes, um eine leistungsstarke Suche dieser Daten zu ermöglichen.

Seit kurzem gibt es eine Geschäftsanforderung, die darin besteht, Daten offline zu speichern und Formulare und Bilder hochzuladen, wenn ein Netzwerksignal vorhanden ist. Also habe ich IndexedDB von HTML5 studiert.

Wenn Sie nur bestimmte Felder speichern müssen, können Sie den lokalen Speicher und den Sitzungsspeicher verwenden. Sobald jedoch große Datenmengen gespeichert sind, erfüllen lokaler Speicher und Sitzungsspeicher die Anforderungen bei weitem nicht mehr. Zu diesem Zeitpunkt wird die Leistungsfähigkeit von IndexedDB zum Ausdruck kommen.

1. Erstellen oder öffnen Sie eine Datenbank

/* 对不同浏览器的indexedDB进行兼容 */
const indexeddb = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
/* 创建或连接数据库 */
const request = indexeddb.open(name, version);  // name：数据库名，version：数据库版本号

Da indexedDB mit verschiedenen Browsern kompatibel ist, benötigen wir eine gewisse Kompatibilität Funktion muss mit indexedDB kompatibel sein.

2. Rückruffunktion zum Herstellen einer Verbindung zur Datenbank

request.addEventListener('success', function(event){ 
    // 打开或创建数据库成功
}, false);
request.addEventListener('error', function(event){ 
    // 打开或创建数据库失败
}, false);
request.addEventListener('upgradeneeded', function(event){ 
    // 更新数据库时执行
}, false);

Nachdem die Verbindung zur Datenbank hergestellt wurde, wird auf die Anfrage gewartet drei Typen Status:

• Erfolg: Datenbank erfolgreich öffnen oder erstellen

• Fehler: Datenbank konnte nicht geöffnet oder erstellt werden

• upgradeneeded: Datenbank aktualisieren

Der upgradeneeded-Status kann nur überwacht werden, wenn indexedDB eine neue Datenbank erstellt und wenn indexeddb.open(name, version) version (Datenbankversionsnummer) Zustand ändert. Dieser Zustand wird nicht ausgelöst, wenn sich die Versionsnummer nicht ändert. Das Erstellen und Löschen des ObjectStore der Datenbank wird alle unter diesem Listening-Ereignis ausgeführt.

3. ObjectStore erstellen und löschen

In indexedDB ähnelt ObjectStore einer Datenbanktabelle.

request.addEventListener('upgradeneeded', function(event){ 
    // 创建数据库实例
    const db = event.target.result;
    // 关闭数据库
    db.close();
    // 判断是否有ObjectStore
    db.objectStoreNames.contains(objectStoreName);
    // 删除ObjectStore
    db.deleteObjectStore(objectStoreName);
}, false);

Sie können die folgende Methode verwenden, um einen ObjectStore zu erstellen

request.addEventListener('upgradeneeded', function(event){ 
    // 创建数据库实例
    const db = event.target.result;
    // 判断是否有ObjectStore
    if(!db.objectStoreNames.contains(objectStoreName)){
        const store = db.createObjectStore(objectStoreName, {
            keyPath: keyPath  // keyPath 作为ObjectStore的搜索关键字
        });
        // 为ObjectStore创造索引
        store.createIndex(name,    // 索引
                          index,   // 键值
                          {
                              unique: unique  // 索引是否唯一
                          });
    }
}, false);

4. Datenhinzufügung, -löschung, -änderung und -abfrage

request.addEventListener('success', function(event){ 
    // 创建数据库实例
    const db = event.target.result;
    // 查找一个ObjectStore
    db.transaction(objectStoreName, wa);
    // wa为'readwrite'时，数据可以读写 
    // wa为'readonly'时，数据只读
    const store = transaction.objectStore(objectStoreName);
}, false);

Datenbankhinzufügung, -löschung und -änderungsabfrage:

// 添加数据，当关键字存在时数据不会添加
store.add(obj);
// 更新数据，当关键字存在时覆盖数据，不存在时会添加数据
store.put(obj);
// 删除数据，删除指定的关键字对应的数据
store.delete(value);
// 清除ObjectStore
store.clear();
// 查找数据，根据关键字查找指定的数据
const g = store.get(value);
g.addEventListener('success', function(event){
    // 异步查找后的回调函数
}, false);

Daten nach Index suchen

const index = store.index(indexName);
const cursor = index.openCursor(range);
cursor.addEventListener('success', function(event){
    const result = event.target.result;
    if(result){
        result.value       // 数据
        result.continue(); // 迭代，游标下移
    }
}, false);

Daten nach Indexbereich suchen

const index = store.index(indexName);
const cursor = index.openCursor(range);
/**
 * range为null时，查找所有数据
 * range为指定值时，查找索引满足该条件的对应的数据
 * range为IDBKeyRange对象时，根据条件查找满足条件的指定范围的数据
 */
// 大于或大于等于 
range = IDBKeyRange.lowerBound(value, true)   // (value, +∞)，>  value
range = IDBKeyRange.lowerBound(value, false)  // [value, +∞)，>= value
// 小于或小于等于，isOpen：true，开区间；false，闭区间
range = IDBKeyRange.upperBound(value, isOpen)
// 大于或大于等于value1，小于或小于等于value2
IDBKeyRange.bound(value1, value2, isOpen1, isOpen2)

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Mehrere Speichermethoden von Front-End-HTML5

H5 Analyse der mobilen REM-Layout-Anpassungsmethode für Aktivitätsseiten

H5 horizontale und vertikale Bildschirmerkennungsmethode

Das obige ist der detaillierte Inhalt vonLokaler HTML5-Speicher IndexedDB. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!