HTML5 local storage IndexedDB

This article mainly introduces the local storage IndexedDB of HTML5, which has certain reference value. Now I share it with everyone. Friends in need can refer to it.

IndexedDB is a low-level API for customers. The client stores large amounts of structured data (including files/blobs). The following article will focus on introducing you to the relevant knowledge of IndexedDB for HTML5 local storage. Friends who are interested should take a look.

IndexedDB is a low-level API used for clients to store 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 the database

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

Because indexedDB has compatibility on different browsers, We need some compatibility function to be compatible with indexedDB.

2. Callback function to connect 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 for three types of Status:

• success: Successfully opened or created the database

• error: Failed to open or create the database

• upgradeneeded: Update 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. state. 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 create an ObjectStore using the following method

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)

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Several storage methods of front-end HTML5

H5 Analysis of mobile REM layout adaptation method for active page

H5 horizontal and vertical screen detection method

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