Detailed explanation of how to use indexedDB database in H5

This article mainly introduces the usage examples of the indexedDB database in HTML5. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor and take a look.

Preface

In the local storage of HTML5, there is a database called indexedDB, which is a database stored on the client. A local NoSQL database that 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 is the database version number. This method returns an IDBOpenDBRequest object, representing a request object to connect to the database. We can define the methods 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 the new version number in the indexedDB.open method to updateVersion, avoid repeatedly modifying 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('数据库已关闭');
}

Delete database

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

Create objectWarehouse

object store (object warehouse) is The basis of indexedDB database, there is no database table in indexedDB, and 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('创建对象仓库成功');
}

db.createObjectStore method receives two parameters, the first is the object warehouse name, the second parameter is an optional parameter, and 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 does 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 a certain attribute of the data object. When retrieving in the database, it can only be retrieved through The attribute set as index is retrieved.

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

Transaction-based

In indexedDB, all data operations can only be performed within a transaction. 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('事务被中止了');
    }
}

db.transaction method receives two parameters. The first parameter can be string or array. When the string is an object warehouse name, the array When it is an array composed 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.

Operation data

1. add(): Add data. Receives a parameter, which is the object that needs to be saved to the object warehouse.

2. put() : Add or modify data. Receives a parameter, which is the object that needs to be saved to the object warehouse.

3. get() : Get data. Receives a parameter, which is the primary key value of the data to be obtained.

4. delete() : Delete data. Receives a parameter, which is the primary key value of the data to be obtained.

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中表单新增属性的分析

The above is the detailed content of Detailed explanation of how to use indexedDB database in H5. For more information, please follow other related articles on the PHP Chinese website!