Ausführliche Erklärung zur Verwendung der indexedDB-Datenbank in H5

Dieser Artikel stellt hauptsächlich die Verwendungsbeispiele der indexedDB-Datenbank in HTML5 vor. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor und werfen wir einen Blick darauf.

Vorwort

Im lokalen Speicher von HTML5 gibt es eine Datenbank namens indexedDB, eine auf dem Client gespeicherte Datenbank . Eine lokale NoSQL-Datenbank, die große Datenmengen speichern kann. Aus dem vorherigen Artikel: HTML5 Advanced Series: Web Storage wissen wir, dass Web Storage bequem und flexibel lokal auf einfache Daten zugreifen kann, aber bei einer großen Menge strukturierten Speichers sind die Vorteile von indexedDB 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('连接数据库成功');
}

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 indexedDB.open-Methode an <🎜 übergeben >aktualisierenVersion, um wiederholte Änderungen an der Datenbank in derselben Version zu vermeiden. Die Versionsnummer muss eine Ganzzahl sein!

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

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('数据库已关闭');
}

Datenbank löschen

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

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('创建对象仓库成功');
}

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, was äquivalent dazu ist, dass id der Primärschlüssel in der Datenbanktabelle ist. 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 beim Abrufen in der Datenbank ein Index über ein bestimmtes Attribut des Datenobjekts erstellt. Es kann nur über das als Index festgelegte Attribut abgerufen werden.

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('创建索引成功');
}

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. Die

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('事务被中止了');
    }
}

db.transaction-Methode empfängt zwei Parameter. Der erste Parameter kann

string oder array sein Name: Wenn es sich bei dem Array um ein Array aus Objekt-Warehouse-Namen handelt, kann die Transaktion für jedes Objekt-Warehouse im Parameter 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

1. add(): Daten hinzufügen. Empfängt einen Parameter, bei dem es sich um das Objekt handelt, das im Objektlager gespeichert werden muss.

2. put(): Daten hinzufügen oder ändern. Empfängt einen Parameter, bei dem es sich um das Objekt handelt, das im Objektlager gespeichert werden muss.

3. get(): Daten abrufen. Empfängt einen Parameter, der den Primärschlüsselwert der abzurufenden Daten darstellt.

4. delete() : Daten löschen. Empfängt einen Parameter, der den Primärschlüsselwert der abzurufenden Daten darstellt.

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('删除数据成功');        // 删除数据成功
    }
}

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);

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

1. next : 游标中的数据按主键值升序排列，主键值相等的数据都被读取

2. nextunique : 游标中的数据按主键值升序排列，主键值相等只读取第一条数据

3. prev : 游标中的数据按主键值降序排列，主键值相等的数据都被读取

4. 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('检索结束');
        }
    }
}

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

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

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

cursor.delete();

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

cursor.continue();

总结

从连接数据库，创建对象仓库、索引，到操作、检索数据，完成了 indexedDB 存取数据的完整流程。下面通过一个完整的例子来更好地掌握 indexedDB 数据库。代码地址：indexedDB-demo

【相关推荐】

1. Javacript免费视频教程

2. 为什么现在HTML5的优势越来越大

3. li inside-block在IE11换行无效的原因

4. 如何在网站上添加谷歌定位信息

5. 对HTML5中表单新增属性的分析

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Verwendung der indexedDB-Datenbank in H5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!