H5 local storage IndexedDB

This time I will bring you H5’s local storage IndexedDB. What are the precautions for using H5’s local storage IndexedDB? The following is a practical case, let’s take a look.

IndexedDB is a low-level API for client-side storage of large amounts of structured data (including files/blobs). The API uses indexes to enable high-performance searches of this data.

Recently there is a business requirement, which is to store data offline, and upload forms and pictures when there is a network signal. So I studied IndexedDB of HTML5.

For the need to store only certain fields, you can use Local Storage and Session Storage. But once a large amount of data is stored, Local Storage and Session Storage are far from meeting the needs. At this time, the power of IndexedDB will be reflected.

1. Create or open a database

/* 对不同浏览器的indexedDB进行兼容 */
const indexeddb = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
/* 创建或连接数据库 */
const request = indexeddb.open(name, version);  // name：数据库名，version：数据库版本号

Because indexedDB is compatible on different browsers, we need some compatibility functions to be compatible with indexedDB.

2. The callback function connected to the database

request.addEventListener('success', function(event){ 
    // 打开或创建数据库成功
}, false);
request.addEventListener('error', function(event){ 
    // 打开或创建数据库失败
}, false);
request.addEventListener('upgradeneeded', function(event){ 
    // 更新数据库时执行
}, false);

After connecting to the database, request will listen to three states:

• success: Success in opening or creating the database

• error: Failure in opening or creating the database

• upgradeneeded: Update the database

The upgradeneeded status can only be monitored when indexedDB creates a new database and when indexeddb.open(name, version) version (database version number) changes. This state will not be triggered when the version number does not change. The creation and deletion of the database's ObjectStore are all executed under this listening event.

3. Create and delete ObjectStore

In indexedDB, ObjectStore is similar to a database table.

request.addEventListener('upgradeneeded', function(event){ 
    // 创建数据库实例
    const db = event.target.result;
    // 关闭数据库
    db.close();
    // 判断是否有ObjectStore
    db.objectStoreNames.contains(objectStoreName);
    // 删除ObjectStore
    db.deleteObjectStore(objectStoreName);
}, false);

You can use the following method to create an ObjectStore

request.addEventListener('upgradeneeded', function(event){ 
    // 创建数据库实例
    const db = event.target.result;
    // 判断是否有ObjectStore
    if(!db.objectStoreNames.contains(objectStoreName)){
        const store = db.createObjectStore(objectStoreName, {
            keyPath: keyPath  // keyPath 作为ObjectStore的搜索关键字
        });
        // 为ObjectStore创造索引
        store.createIndex(name,    // 索引
                          index,   // 键值
                          {
                              unique: unique  // 索引是否唯一
                          });
    }
}, false);

4. Data addition, deletion and modification query

request.addEventListener('success', function(event){ 
    // 创建数据库实例
    const db = event.target.result;
    // 查找一个ObjectStore
    db.transaction(objectStoreName, wa);
    // wa为'readwrite'时，数据可以读写 
    // wa为'readonly'时，数据只读
    const store = transaction.objectStore(objectStoreName);
}, false);

Database addition, deletion and modification query:

// 添加数据，当关键字存在时数据不会添加
store.add(obj);
// 更新数据，当关键字存在时覆盖数据，不存在时会添加数据
store.put(obj);
// 删除数据，删除指定的关键字对应的数据
store.delete(value);
// 清除ObjectStore
store.clear();
// 查找数据，根据关键字查找指定的数据
const g = store.get(value);
g.addEventListener('success', function(event){
    // 异步查找后的回调函数
}, false);

Find data by index

const index = store.index(indexName);
const cursor = index.openCursor(range);
cursor.addEventListener('success', function(event){
    const result = event.target.result;
    if(result){
        result.value       // 数据
        result.continue(); // 迭代，游标下移
    }
}, false);

Find data by index range

const index = store.index(indexName);
const cursor = index.openCursor(range);
/**
 * range为null时，查找所有数据
 * range为指定值时，查找索引满足该条件的对应的数据
 * range为IDBKeyRange对象时，根据条件查找满足条件的指定范围的数据
 */
// 大于或大于等于 
range = IDBKeyRange.lowerBound(value, true)   // (value, +∞)，>  value
range = IDBKeyRange.lowerBound(value, false)  // [value, +∞)，>= value
// 小于或小于等于，isOpen：true，开区间；false，闭区间
range = IDBKeyRange.upperBound(value, isOpen)
// 大于或大于等于value1，小于或小于等于value2
IDBKeyRange.bound(value1, value2, isOpen1, isOpen2)

Finally, I encapsulated an indexedDB library, you can refer to it: duan602728596/IndexedDB

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

H5 file asynchronous upload

##Dynamic matching of datalist input box and background database data

The above is the detailed content of H5 local storage IndexedDB. For more information, please follow other related articles on the PHP Chinese website!