indexedDB-Datenbank-H5-Tutorial-php.cn

Vorwort

Im lokalen Speicher von HTML5 gibt es eine Datenbank namens indexedDB, bei der es sich um eine lokal auf dem Client gespeicherte NoSQL-Datenbank handelt große Datenmengen. 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(&#39;dbName&#39;, 1);  // 打开 dbName 数据库request.onerror = function(e){              // 监听连接数据库失败时执行
    console.log(&#39;连接数据库失败&#39;);}request.onsuccess = function(e){            // 监听连接数据库成功时执行
    console.log(&#39;连接数据库成功&#39;);}

Nach dem Login kopieren

Wir verwenden die Methode indexedDB.open, um eine Verbindung zur Datenbank herzustellen. Diese Methode empfängt zwei Parameter, den ersten der Datenbankname, der zweite ist die Datenbankversionsnummer. Diese Methode gibt ein IDBOpenDBRequest object zurück, das ein Anforderungsobjekt für die 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 indexedDB API nicht zulässt, dass sich das Data Warehouse in der Datenbank in derselben Version ändert, müssen Sie eine neue Versionsnummer in der indexedDB.open-Methode < übergeben 🎜 >Aktualisieren Sie die -Version, um wiederholte Änderungen an der Datenbank in derselben Version zu vermeiden. Die Versionsnummer muss eine Ganzzahl sein!

var request = indexedDB.open(&#39;dbName&#39;, 2);  // 更新版本，打开版本为2的数据库// ...request.onupgradeneeded = function(e){
    console.log(&#39;新数据库版本号为=&#39; + 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 des Objekts aufrufen, um die Datenbank zu schließen.

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

Nach dem Login kopieren

Datenbank löschen

indexedDB.deleteDatabase(&#39;dbName&#39;);console.log(&#39;数据库已删除&#39;);

Nach dem Login kopieren

Objekt erstellenWarehouse

Objekt Store (Objektlager) ist die Basis der indexedDB-Datenbank und existiert nicht in indexedDB Datenbanktabelle und Objektlager entsprechen einer Datenbanktabelle.

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

Nach dem Login kopieren

Die db.createObjectStore-Methode empfängt zwei Parameter, der erste ist der Objekt-Warehouse-Name und der zweite Parameter ist der Verfügbare Parameter auswählen, 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 ein Index über ein Attribut des Datenobjekts erstellt. Beim Abrufen in der Datenbank können Sie nur den Attributsatz verwenden als Index.

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

Nach dem Login kopieren

Die Methode „store.createIndex“ empfängt drei Parameter, der erste ist der Indexname und der zweite das Datenobjekt . Im obigen Beispiel wird das Attribut userName zum Erstellen des Index verwendet. Der dritte Parameter ist ein optionaler Parameter und 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 Methode trans

action des IDBOpenDBRequest-Objekts verwenden, um eine schreibgeschützte Transaktion oder eine Lese-/Schreibtransaktion zu starten.

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

Nach dem Login kopieren

Die db.transaction-Methode empfängt zwei Parameter, der erste Parameter kann ein

String sein Array: Wenn eine Zeichenfolge ein Objekt-Warehouse-Name ist, wenn ein Array ein Array aus Objekt-Warehouse-Namen ist, 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.

操作数据

add() : 增加数据。接收一个参数，为需要保存到对象仓库中的对象。
put() : 增加或修改数据。接收一个参数，为需要保存到对象仓库中的对象。
get() : 获取数据。接收一个参数，为需要获取数据的主键值。
delete() : 删除数据。接收一个参数，为需要获取数据的主键值。

var request = indexedDB.open(&#39;dbName&#39;, 5);// ...request.onsuccess = function(e){
    var db = e.target.result;
    var tx = db.transaction(&#39;Users&#39;,&#39;readwrite&#39;);
    var store = tx.objectStore(&#39;Users&#39;);
    var value = {
        &#39;userId&#39;: 1,
        &#39;userName&#39;: &#39;linxin&#39;,
        &#39;age&#39;: 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(&#39;删除数据成功&#39;);        // 删除数据成功
    }}

Nach dem Login kopieren

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

检索数据

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

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

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

Nach dem Login kopieren

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

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

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

cursor.delete();

Nach dem Login kopieren

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

cursor.continue();

Nach dem Login kopieren

总结

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

更多文章：lin-xin/blog

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