HTML5 顾客端数据信息库简单应用:IndexedDB

2020-10-09 17:59 jianzhan

IndexedDB详细介绍

IndexedDB是1种能在访问器中长久的储存构造化数据信息的目标数据信息库,而且为web运用出示了丰富多彩的查寻工作能力。

相比于Web SQL数据信息库它更为简易,并且官方规范中有关Web SQL的工作中早已终止。

相比于Web Storage,IndexedDB储存室内空间是无尚限且永久性的。

建立数据信息库

IndexedDB是按网站域名分派单独室内空间,1个单独网站域名下能够建立好几个数据信息库,每一个数据信息库能够建立好几个目标储存室内空间(表/目标库房),1个目标储存室内空间能够储存好几个目标数据信息(数据库索引的字段)。

function openDB(){
    var request = indexedDB.open(dbName,dbVer);//假如数据信息库存在就开启,假如数据信息库不存在就去新建
    request.onsuccess = function(e){
    }
    request.onerror = function(e){
    }
    //建立新数据信息库,或数据信息库版本号号被变更的情况下考虑onupgradeneeded恶性事件,并实行回调函数涵数
    request.onupgradeneeded = function(e){
        
    }
}

indexedDB.open方式用于建立数据信息库,里边传两个主要参数(数据信息库名,数据信息库版本号),request.onupgradeneeded方式在建立新数据信息库,或数据信息库版本号号更改时启用

建立目标储存室内空间

request.onupgradeneeded = function(e){
        db = e.target.result;
        //分辨是不是有这个目标库房的存在
        if(!db.objectStoreNames.contains('Users')){
            //假如目标库房不存在,建立1个新的目标库房(keyPath,主键 ; autoIncrement,是不是自增),会回到1个目标(objectStore)
            var store = db.createObjectStore('Users',{keyPath:'id',autoIncrement:true});
            //特定能够被数据库索引的字段,unique字段是不是唯1,能够建立好几个数据库索引
            store.createIndex('username','username',{unique:false})
        }
    }

store.createIndex建立数据库索引字段,里边传3个主要参数(数据库索引取名,数据库索引字段,是不是唯1)

事务管理(transaction)

对IndexedDB的查寻和升级全是包括在1个事务管理(transaction)中,以此来确保这些实际操作要末1起取得成功,要末1起不成功。

function dataHandle(data){
    //建立事务管理目标
    var ts = db.transaction('Users','readwrite');
    //根据事务管理目标获得目标库房
    var store = ts.objectStore('Users');
    //向库房加上数据信息
    var req = store.put(data);
    req.onsuccess = function(){
        
    }
}

对库房store的实际操作:

  • put()加上数据信息,主要参数为要储存的目标,假如数据信息主键(keypath)已存在同样的则变更数据信息。
  • add()加上数据信息,主要参数为要储存的目标,假如数据信息主键(keypath)已存在同样的则储存不成功。
  • delete()删掉数据信息,传入主要参数为总体目标数据信息的主键。get()获得数据信息,传入主要参数为总体目标数据信息的主键。

遍历数据信息

根据游标cursor查找范畴内的目标库房中的数据信息

var range = IDBKeyRange.lowerBound(1);//特定游标查找范畴
var req = store.openCursor(range);//建立游标
dbData = [];
req.onsuccess = function(){
    var cursor = this.result;
    if(cursor){
        dbData.push(cursor.value);
        cursor.continue();//循环系统载入数据信息直至完毕
    }else{
        
    }
}

IDBKeyRange关键的几个方式:

  • IDBKeyRange.bound(n1, n2, false, false); 范畴从n1到n2的主键,第34个主要参数为是不是包括n1或n2
  • IDBKeyRange.only(n);范畴1个主键
  • IDBKeyRange.lowerBound(n, false);超过n的主键结合
  • IDBKeyRange.upperBound(n, false);小于n的主键结合

查寻数据信息

能被查寻的数据信息必须被store.createIndex()建立过数据库索引

    var store = ts.objectStore('Users');
    var index = store.index("username");//开启数据信息库数据库索引
    var range = IDBKeyRange.only(keyName);//传送1个单键(数据库索引的值)获得range
    var req = index.openCursor(range);

删掉数据信息库

indexedDB.deleteDatabase("数据信息库名字");

总结

以上进行了建立数据信息库,建立目标存储室内空间,根据事务管理对数据信息开展遍历,加上,查寻的实际操作。编码详细地址Demo详细地址 ,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。