Detaillierte Erläuterung der Verwendung der indexeddb-Datenbank-H5-Tutorial-php.cn

Dieses Mal werde ich Ihnen eine detaillierte Erklärung zur Verwendung der indexeddb-Datenbank geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung der indexeddb-Datenbank? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Vorwort

Im lokalen Speicher von HTML5 gibt es eine Datenbank namens indexedDB, eine lokal auf dem Client gespeicherte NoSQL-Datenbank. Sie kann eine Menge speichern Daten. Aus dem vorherigen Artikel: HTML5 Advanced Series: Web Storage wissen wir, dass Web Storage bequem und flexibel lokal auf einfache Daten zugreifen kann. Bei einer großen Menge strukturierten Speichers sind die Vorteile von indexedDB jedoch noch offensichtlicher. Schauen wir uns als Nächstes an, wie indexedDB Daten speichert.

Mit Datenbank verbinden

Eine Website kann mehrere indexedDB-Datenbanken haben, aber der Name jeder Datenbank ist eindeutig. Wir müssen über den Datenbanknamen eine Verbindung zu einer bestimmten Datenbank herstellen.

var request = indexedDB.open('dbName', 1);  // 打开 dbName 数据库
request.onerror = function(e){              // 监听连接数据库失败时执行
    console.log('连接数据库失败');
}
request.onsuccess = function(e){            // 监听连接数据库成功时执行
    console.log('连接数据库成功');
}

Nach dem Login kopieren

Wir verwenden die Methode indexedDB.open, um eine Verbindung zur Datenbank herzustellen. Diese Methode empfängt zwei Parameter, der erste ist der Datenbankname und der zweite ist die Datenbankversionsnummer. Diese Methode gibt ein IDBOpenDBRequest-Objekt zurück, das ein Anforderungsobjekt zum Herstellen einer Verbindung mit der Datenbank darstellt. Wir können die Methoden definieren, die ausgeführt werden sollen, wenn die Verbindung erfolgreich ist oder fehlschlägt, indem wir die Ereignisse onsuccess und onerror des Anforderungsobjekts abhören.

Da die indexedDB-API nicht zulässt, dass sich das Data Warehouse in der Datenbank in derselben Version ändert, müssen Sie die neue Versionsnummer in der Methode indexedDB.open übergeben, um die Version zu aktualisieren und wiederholte Änderungen zu vermeiden die Datenbank in der gleichen Version. Die Versionsnummer muss eine Ganzzahl sein!

var request = indexedDB.open('dbName', 2);  // 更新版本，打开版本为2的数据库
// ...
request.onupgradeneeded = function(e){
    console.log('新数据库版本号为=' + e.newVersion);
}

Nach dem Login kopieren

Wir definieren die Methode, die ausgeführt werden soll, wenn die Datenbankversion aktualisiert wird, indem wir das onupgradeneeded-Ereignis des Anforderungsobjekts abhören.

Schließen Sie die Datenbank

Nach erfolgreicher Verbindung mit der Datenbank über indexedDB.open wird ein IDBOpenDBRequest-Objekt zurückgegeben. Wir können die Close-Methode dieses Objekts zum Schließen aufrufen die Datenbank.

var request = indexedDB.open('dbName', 2);
// ...
request.onsuccess = function(e){
    console.log('连接数据库成功');
    var db = e.target.result;
    db.close();
    console.log('数据库已关闭');
}

Nach dem Login kopieren

Datenbank löschen

indexedDB.deleteDatabase('dbName');
console.log('数据库已删除');

Nach dem Login kopieren

Objekt erstellenLager

Objektspeicher( Das Objektlager ist die Basis der indexedDB-Datenbank. In indexedDB gibt es keine Datenbanktabelle, und das Objektlager entspricht einer Datenbanktabelle.

var request = indexedDB.open('dbName', 3);
// ...
request.onupgradeneeded = function(e){
    var db = e.target.result;
    var store = db.createObjectStore('Users', {keyPath: 'userId', autoIncrement: false});
    console.log('创建对象仓库成功');
}

Nach dem Login kopieren

Die db.createObjectStore-Methode empfängt zwei Parameter, der erste ist der Name des Objektlagers, der zweite Parameter ist ein optionaler Parameter und der Wert ist ein js-Objekt. Das keyPath-Attribut in diesem Objekt ist der Primärschlüssel, der der ID als Primärschlüssel in der Datenbanktabelle entspricht. Wenn das Attribut autoIncrement falsch ist, bedeutet dies, dass der Primärschlüsselwert nicht automatisch erhöht wird und der Primärschlüsselwert beim Hinzufügen von Daten angegeben werden muss.

Hinweis: In der Datenbank darf der Name des Objektlagers nicht wiederholt werden, da der Browser sonst einen Fehler meldet.

Index erstellen

indexedDB In der Datenbank wird ein Index über ein Attribut des Datenobjekts erstellt. Beim Abrufen in der Datenbank wird nur das Attribut als Index festgelegt Suche verwendet werden kann.

var request = indexedDB.open('dbName', 4);
// ...
request.onupgradeneeded = function(e){
    var db = e.target.result;
    var store = db.createObjectStore('newUsers', {keyPath: 'userId', autoIncrement: false});
    var idx = store.createIndex('usernameIndex','userName',{unique: false})
    console.log('创建索引成功');
}

Nach dem Login kopieren

Die Methode „store.createIndex“ empfängt drei Parameter. Der erste ist der Indexname und der zweite das Attribut des Datenobjekts. Im obigen Beispiel wird das Attribut „userName“ zum Erstellen des Index verwendet Der dritte Parameter sind die Select-Parameter, der Wert ist ein js-Objekt. Das eindeutige Attribut in diesem Objekt ist wahr, was bedeutet, dass die Indexwerte nicht gleich sein können, dh der Benutzername der beiden Datenelemente kann nicht gleich sein, und wenn er falsch ist, können sie gleich sein.

Transaktionsbasiert

In indexedDB können alle Datenoperationen nur innerhalb von Transaktionen ausgeführt werden. Nach erfolgreicher Verbindung mit der Datenbank können Sie die Transaktionsmethode des IDBOpenDBRequest-Objekts verwenden, um eine schreibgeschützte Transaktion oder eine Lese-/Schreibtransaktion zu starten.

var request = indexedDB.open('dbName', 5);
// ...
request.onupgradeneeded = function(e){
    var db = e.target.result;
    var tx = db.transaction('Users','readonly');
    tx.oncomplete = function(e){
        console.log('事务结束了');
    }
    tx.onabort = function(e){
        console.log('事务被中止了');
    }
}

Nach dem Login kopieren

Die db.transaction-Methode empfängt zwei Parameter. Der erste Parameter kann ein String oder ein Array sein. Wenn es ein Array ist, ist es ein Array Ein Array, das aus Objekt-Warehouse-Namen besteht. Die Transaktion kann auf jedem Objekt-Warehouse in den Parametern ausgeführt werden. Der zweite Parameter ist Transaktionsmodus Wenn schreibgeschützt übergeben wird, können nur Lesevorgänge für das Objektlager ausgeführt werden, Schreibvorgänge können jedoch nicht ausgeführt werden. Für Lese- und Schreibvorgänge kann Readwrite übergeben werden.

Betriebsdaten

add(): Daten hinzufügen. Empfängt einen Parameter, bei dem es sich um das Objekt handelt, das im Objektlager gespeichert werden muss.
put(): Daten hinzufügen oder ändern. Empfängt einen Parameter, bei dem es sich um das Objekt handelt, das im Objektlager gespeichert werden muss.
get(): Daten abrufen. Empfängt einen Parameter, der den Primärschlüsselwert der abzurufenden Daten darstellt.
delete() : 删除数据。接收一个参数，为需要获取数据的主键值。

var request = indexedDB.open('dbName', 5);
// ...
request.onsuccess = function(e){
    var db = e.target.result;
    var tx = db.transaction('Users','readwrite');
    var store = tx.objectStore('Users');
    var value = {
        'userId': 1,
        'userName': 'linxin',
        'age': 24
    }
    var req1 = store.put(value);        // 保存数据
    var req2 = store.get(1);            // 获取索引userId为1的数据
    req2.onsuccess = function(){
        console.log(this.result.userName);  // linxin
    }
    var req3 = store.delete(1);             // 删除索引为1的数据
    req3.onsuccess = function(){
        console.log('删除数据成功');        // 删除数据成功
    }
}

Nach dem Login kopieren

add 和 put 的作用类似，区别在于 put 保存数据时，如果该数据的主键在数据库中已经有相同主键的时候，则会修改数据库中对应主键的对象，而使用 add 保存数据，如果该主键已经存在，则保存失败。

检索数据

上面我们知道使用 get() 方法可以获取数据，但是需要制定主键值。如果我们想要获取一个区间的数据，可以使用游标。游标通过对象仓库的 openCursor 方法创建并打开。

openCursor 方法接收两个参数，第一个是 IDBKeyRange 对象，该对象创建方法主要有以下几种：

// boundRange 表示主键值从1到10(包含1和10)的集合。
// 如果第三个参数为true，则表示不包含最小键值1，如果第四参数为true，则表示不包含最大键值10，默认都为false
var boundRange = IDBKeyRange.bound(1, 10, false, false);
// onlyRange 表示由一个主键值的集合。only() 参数则为主键值，整数类型。
var onlyRange = IDBKeyRange.only(1);
// lowerRaneg 表示大于等于1的主键值的集合。
// 第二个参数可选，为true则表示不包含最小主键1，false则包含，默认为false
var lowerRange = IDBKeyRange.lowerBound(1, false);
// upperRange 表示小于等于10的主键值的集合。
// 第二个参数可选，为true则表示不包含最大主键10，false则包含，默认为false
var upperRange = IDBKeyRange.upperBound(10, false);

Nach dem Login kopieren

openCursor 方法的第二个参数表示游标的读取方向，主要有以下几种：

next : 游标中的数据按主键值升序排列，主键值相等的数据都被读取
nextunique : 游标中的数据按主键值升序排列，主键值相等只读取第一条数据
prev : 游标中的数据按主键值降序排列，主键值相等的数据都被读取
prevunique : 游标中的数据按主键值降序排列，主键值相等只读取第一条数据

var request = indexedDB.open('dbName', 6);
// ...
request.onsuccess = function(e){
    var db = e.target.result;
    var tx = db.transaction('Users','readwrite');
    var store = tx.objectStore('Users');
    var range = IDBKeyRange.bound(1,10);
    var req = store.openCursor(range, 'next');
    req.onsuccess = function(){
        var cursor = this.result;
        if(cursor){
            console.log(cursor.value.userName);
            cursor.continue();
        }else{
            console.log('检索结束');
        }
    }
}

Nach dem Login kopieren

当存在符合检索条件的数据时，可以通过 update 方法更新该数据：

cursor.updata({
    userId : cursor.key,
    userName : 'Hello',
    age : 18
});

Nach dem Login kopieren

可以通过 delete 方法删除该数据：

cursor.delete();

Nach dem Login kopieren

可以通过 continue 方法继续读取下一条数据，否则读到第一条数据之后不再继续读取：

cursor.continue();

Nach dem Login kopieren

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！