Lokaler H5-Speicher IndexedDB

Dieses Mal präsentiere ich Ihnen IndexedDB, den lokalen Speicher von H5. Was sind die Vorsichtsmaßnahmen bei der Verwendung des lokalen Speichers von H5 für IndexedDB?

IndexedDB ist eine Low-Level-API für die clientseitige Speicherung großer Mengen strukturierter 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 einige Kompatibilitätsfunktionen, um mit indexedDB kompatibel zu sein.

2. Die Rückruffunktion, die mit der Datenbank verbunden ist

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

Nach der Verbindung mit der Datenbank überwacht die Anforderung drei Zustände:

• Erfolg: Datenbank erfolgreich geöffnet oder erstellt

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

• upgradeneeded: Datenbank aktualisieren

Der Status „upgradeneeded“ kann nur überwacht werden, wenn indexedDB eine neue Datenbank erstellt und wenn sich die Version von indexeddb.open(name, version) (Datenbankversionsnummer) ä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. Daten hinzufügen, löschen, ändern und abfragen

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ösch- und Änderungsprüfung:

// 添加数据，当关键字存在时数据不会添加
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 durchsuchen

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 durchsuchen

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)

Abschließend habe ich gekapselt Eine indexedDB-Bibliothek finden Sie unter: duan602728596/IndexedDB

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

Empfohlene Lektüre:

Asynchroner Upload der H5-Datei

Dynamischer Abgleich von Datenlisten-Eingabefeld und Hintergrunddatenbankdaten

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