indexedDB database

Preface

In the local storage of HTML5, there is a database called indexedDB, which is a NoSQL database stored locally on the client. It can store large amounts of data. From the previous article: HTML5 Advanced Series: Web Storage, we know that web Storage can conveniently and flexibly access simple data locally, but for a large amount of structured storage, the advantages of indexedDB are even more obvious. Next let's take a look at how indexedDB stores data.

Connect to database

A website can have multiple indexedDB databases, but the name of each database is unique. We need to connect to a specific database through the database name.

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

We use the indexedDB.open method to connect to the database. This method receives two parameters, the first is the database name, and the second The second is the database version number. This method will return an IDBOpenDBRequest object, representing a request object to connect to the database. We can define the methods that need to be executed if the connection succeeds or fails by listening to the onsuccess and onerror events of the request object.

Because indexedDB API does not allow the data warehouse in the database to change in the same version, you need to pass in a new version number in the indexedDB.open method Update the version to avoid repeated modifications to the database in the same version. The version number must be an integer!

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

We define the method to be executed when the database version is updated by listening to the onupgradeneeded event of the request object.

Close the database

After successfully connecting to the database using indexedDB.open, an IDBOpenDBRequest object will be returned. We can call the close method of the object to close the database.

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

DeleteDatabase

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

Create objectWarehouse

object Store (object warehouse) is the basis of indexedDB database. There is no database table in indexedDB, but The object warehouse is equivalent to a database table.

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

The db.createObjectStore method receives two parameters, the first is the object warehouse name, and the second parameter is an optional parameter , the value is a js object. The keyPath attribute in this object is the primary key, which is equivalent to the id as the primary key in the database table. If the autoIncrement attribute is false, it means that the primary key value will not increase automatically, and the primary key value needs to be specified when adding data.

Note: In the database, the object warehouse name cannot be repeated, otherwise the browser will report an error.

Createindex

indexedDB In the database, an index is created through an attribute of the data object. When retrieving in the database, you can only use the attribute that is set as the index. Search.

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

The store.createIndex method receives three parameters, the first is the index name, and the second is the attribute of the data object. In the above example, the userName attribute is used to create the index. The third parameter is an optional parameter and the value is a js object. The unique attribute in this object is true, which means that the index values ​​cannot be the same, that is, the userName of the two pieces of data cannot be the same. If it is false, it can be the same.

Based on transactions

In indexedDB, all data operations can only be performed within transactions. After successfully connecting to the database, you can use the transaction method of the IDBOpenDBRequest object to start a read-only transaction or a read-write transaction.

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

The db.transaction method receives two parameters, the first parameter can be a string or Array, when a string is an object warehouse name, when an array is an array consisting of object warehouse names, transaction can operate on any object warehouse in the parameter. The second parameter is Transaction mode. When readonly is passed in, only read operations can be performed on the object warehouse, and write operations cannot be performed. Readwrite can be passed in for read and write operations.

操作数据

• add() : 增加数据。接收一个参数，为需要保存到对象仓库中的对象。

• put() : 增加或修改数据。接收一个参数，为需要保存到对象仓库中的对象。

• get() : 获取数据。接收一个参数，为需要获取数据的主键值。

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

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

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

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

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

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

cursor.delete();

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

cursor.continue();

总结

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

更多文章：lin-xin/blog

The above is the detailed content of indexedDB database. For more information, please follow other related articles on the PHP Chinese website!