H5的当地存储之IndexedDB--百分百源码网

H5的当地存储之IndexedDB-

发布时间：08/01 来源：未知浏览：关键词：

这次给大家带来H5的当地存储之IndexedDB，运用H5当地存储IndexedDB的注意事项是什么，下面就是实战案例，一起来看一下。这次给大家带来H5的当地存储之IndexedDB，运用H5当地存储IndexedDB的注意事项是什么，下面就是实战案例，一起来看一下。

IndexedDB 是一种初级API，用于客户端存储批量构造化数据(包含, 文件/ blobs)。该API运用索引来实现对该数据的高机能搜寻。

比来有一项业务需求，就是可以离线存储数据，比及有网络信号的时候可以上传表单和图片。所以研究了一下HTML5的IndexedDB。

关于只存储某些字段的需求来说，可以运用Local Storage和 Session Storage来完成。但是一旦存储批量的数据，Local Storage和 Session Storage就远远不克不及知足需求了。这时，IndexedDB的强大之处就会表现出来了。

1、新建或者打开数据库

/* 对不一样阅读器的indexedDB进行兼容 */
const indexeddb = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
/* 新建或连贯数据库 */
const request = indexeddb.open(name, version);  // name：数据库名，version：数据库版本号

由于indexedDB在不一样的阅读器上有兼容性，所以我们需要些一个兼容函数来兼容indexedDB。

2、连贯到数据库的回调函数

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

在连贯到数据库后，request会监听三种状态：

success：打开或新建数据库成功
error：打开或新建数据库失败
upgradeneeded：更新数据库

upgradeneeded状态是在indexedDB新建新的数据库时和indexeddb.open(name, version) version（数据库版本号）产生变化时才干监听到此状态。当版本号不产生变化时，不会触发此状态。数据库的ObjectStore的新建、删除等都是在这个监听事件下施行的。

3、新建、删除ObjectStore

在indexedDB中，ObjectStore相似于数据库的表。

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

可以用如下办法新建一个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、数据的增删改查

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

数据库的增删改查：

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

按索引查寻数据

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

按索引的范畴查寻数据

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)

最后，本人封装了一个indexedDB的库，可以参照一下：duan602728596/IndexedDB

信赖看了本案牍例你已经把握了办法，更多出色请关注百分百源码网其它相干文章！

举荐浏览：

H5文件异步上传

datalist输入框与后台数据库数据的动态匹配

以上就是H5的当地存储之IndexedDB的细致内容，更多请关注百分百源码网其它相干文章！

打赏