HTML5当地储存之IndexedDB

日期:2021-02-23 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

IndexedDB 是1种低等API,用于顾客端储存很多构造化数据信息(包含, 文档/ blobs)。该API应用数据库索引来完成对该数据信息的高特性检索。

近期有1项业务流程要求,便是能够线下储存数据信息,直到有互联网数据信号的情况下能够提交表单和照片。因此科学研究了1下HTML5的IndexedDB。

针对只储存一些字段的要求来讲,可使用Local Storage和 Session Storage来进行。可是1旦储存很多的数据信息,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在不一样的访问器上有适配性,因此大家必须些1个适配涵数来适配indexedDB。

2、联接到数据信息库的回调函数涵数

request.addEventListener('success', function(event){ 
    // 开启或建立数据信息库取得成功
}, false);
request.addEventListener('error', function(event){ 
    // 开启或建立数据信息库不成功
}, false);
request.addEventListener('upgradeneeded', function(event){ 
    // 升级数据信息库时实行
}, false);

在联接到数据信息库后,request会监视3种情况:

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

能够用以下方式建立1个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  // 数据库索引是不是唯1
                          });
    }
}, false);

4、数据信息的删改改查

request.addEventListener('success', function(event){ 
    // 建立数据信息库案例
    const db = event.target.result;
    // 搜索1个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)

最终,自身封裝了1个indexedDB的库,能够参照1下:duan602728596/IndexedDB

以上所述是网编给大伙儿详细介绍的HTML5当地储存之IndexedDB,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!