全国服务热线:4008-888-888

技术知识

HTML5中indexedDB 数据信息库的应用案例

序言

在 HTML5 的当地储存中,有1种叫 indexedDB 的数据信息库,该数据信息库是1种储存在顾客端当地的 NoSQL 数据信息库,它能够储存很多的数据信息。从上篇:HTML5 进阶系列:web Storage ,大家了解 web Storage 能够便捷灵便的在当地存储简易数据信息,可是针对很多构造化储存,indexedDB 的优点就更为显著。接下来大家看来看 indexedDB 怎样储存数据信息。

联接数据信息库

1个网站能够有好几个 indexedDB 数据信息库,但每一个数据信息库的名字是唯1的。大家必须根据数据信息库名来联接某个实际的数据信息库。

var request = indexedDB.open('dbName', 1);  // 开启 dbName 数据信息库
request.onerror = function(e){              // 监视联接数据信息库不成功时实行
    console.log('联接数据信息库不成功');
}
request.onsuccess = function(e){            // 监视联接数据信息库取得成功时实行
    console.log('联接数据信息库取得成功');
}

大家应用 indexedDB.open 方式来联接数据信息库,该方式接受两个主要参数,第1个是数据信息库名,第2个是数据信息库版本号号。该方式会回到1个 IDBOpenDBRequest 目标,意味着1个恳求联接数据信息库的恳求目标。大家能够根据监视恳求目标的 onsuccess 和 onerror 恶性事件来界定联接取得成功或不成功需实行的方式。

由于 indexedDB API 中不容许数据信息库中的数据信息库房在同1版本号中产生转变,因此必须在 indexedDB.open 方式中传入新的版本号号来升级版本号,防止在同1版本号中反复改动数据信息库。版本号号务必为整数金额!

var request = indexedDB.open('dbName', 2);  // 升级版本号,开启版本号为2的数据信息库
// ...
request.onupgradeneeded = function(e){
    console.log('新数据信息库版本号号为=' + e.newVersion);
}

大家根据监视恳求目标的 onupgradeneeded 恶性事件来界定数据信息库版本号升级时实行的方式。

关掉数据信息库

应用 indexedDB.open 联接数据信息库取得成功后会回到1个 IDBOpenDBRequest 目标,大家能够启用该目标的 close 方式来关掉数据信息库。

var request = indexedDB.open('dbName', 2);
// ...
request.onsuccess = function(e){
    console.log('联接数据信息库取得成功');
    var db = e.target.result;
    db.close();
    console.log('数据信息库已关掉');
}

删掉数据信息库

indexedDB.deleteDatabase('dbName');
console.log('数据信息库已删掉');

建立目标库房

object store(目标库房)是 indexedDB 数据信息库的基本,在indexedDB 中并沒有数据信息库表,而目标库房,便是非常于1个数据信息库表。

var request = indexedDB.open('dbName', 3);
// ...
request.onupgradeneeded = function(e){
    var db = e.target.result;
    var store = db.createObjectStore('Users', {keyPath: 'userId', autoIncrement: false});
    console.log('建立目标库房取得成功');
}

db.createObjectStore 方式接受两个主要参数,第1个为目标库房名,第2个主要参数为可选主要参数,值为1个js目标。该目标中的 keyPath 特性为主键,非常于数据信息库表格中 id 为主键。autoIncrement 特性为 false,则表明主键值不自增,加上数据信息时需特定主键值。

留意:在数据信息库中,目标库房名不能反复,不然访问器会出错。

建立数据库索引

indexedDB 数据信息库中根据数据信息目标的某个特性来建立数据库索引,在数据信息库中开展查找时,只能根据被设为数据库索引的特性开展查找。

var request = indexedDB.open('dbName', 4);
// ...
request.onupgradeneeded = function(e){
    var db = e.target.result;
    var store = db.createObjectStore('newUsers', {keyPath: 'userId', autoIncrement: false});
    var idx = store.createIndex('usernameIndex','userName',{unique: false})
    console.log('建立数据库索引取得成功');
}

store.createIndex 方式接受3个主要参数,第1个为数据库索引名,第2个为数据信息目标的特性,上例中应用 userName 特性来建立数据库索引,第3个主要参数为可选主要参数,值为1个js目标。该目标中的 unique 特性为 true,意味着数据库索引值不能以同样,即两条数据信息的 userName 不能以同样,为 false 则能够同样。

根据事务管理

在 indexedDB 中,全部数据信息实际操作都只能在事务管理中实行。联接数据信息库取得成功后,可使用 IDBOpenDBRequest 目标的 transaction 方式打开写保护事务管理或读写能力事务管理。

var request = indexedDB.open('dbName', 5);
// ...
request.onupgradeneeded = function(e){
    var db = e.target.result;
    var tx = db.transaction('Users','readonly');
    tx.oncomplete = function(e){
        console.log('事务管理完毕了');
    }
    tx.onabort = function(e){
        console.log('事务管理被中断了');
    }
}

db.transaction 方式接受两个主要参数,第1个主要参数能够是标识符串或数字能量数组,标识符串时则是1个目标库房名,数字能量数组时则是由目标库房名构成的数字能量数组,transaction 能够对主要参数中任何1个目标库房开展实际操作。第2个主要参数为事务管理方式,传入 readonly 时只能对目标库房开展读实际操作,没法写实际操作。能够传入 readwrite 开展读写能力实际操作。

实际操作数据信息

  1. add() : 提升数据信息。接受1个主要参数,为必须储存到目标库房中的目标。
  2. put() : 提升或改动数据信息。接受1个主要参数,为必须储存到目标库房中的目标。
  3. get() : 获得数据信息。接受1个主要参数,为必须获得数据信息的主键值。
  4. delete() : 删掉数据信息。接受1个主要参数,为必须获得数据信息的主键值。
var request = indexedDB.open('dbName', 5);
// ...
request.onsuccess = function(e){
    var db = e.target.result;
    var tx = db.transaction('Users','readwrite');
    var store = tx.objectStore('Users');
    var value = {
        'userId': 1,
        'userName': 'linxin',
        'age': 24
    }
    var req1 = store.put(value);        // 储存数据信息
    var req2 = store.get(1);            // 获得数据库索引userId为1的数据信息
    req2.onsuccess = function(){
        console.log(this.result.userName);  // linxin
    }
    var req3 = store.delete(1);             // 删掉数据库索引为1的数据信息
    req3.onsuccess = function(){
        console.log('删掉数据信息取得成功');        // 删掉数据信息取得成功
    }
}

add 和 put 的功效相近,差别在于 put 储存数据信息时,假如该数据信息的主键在数据信息库中早已有同样主键的情况下,则会改动数据信息库中对应主键的目标,而应用 add 储存数据信息,假如该主键早已存在,则储存不成功。

查找数据信息

上面大家了解应用 get() 方式能够获得数据信息,可是必须制订主键值。假如大家要想获得1个区段的数据信息,可使用游标。游标根据目标库房的 openCursor 方式建立并开启。

openCursor 方式接受两个主要参数,第1个是 IDBKeyRange 目标,该目标建立方式关键有下列几种:

// boundRange 表明主键值从1到10(包括1和10)的结合。
// 假如第3个主要参数为true,则表明不包括最少键值1,假如第4主要参数为true,则表明不包括最大键值10,默认设置都为false
var boundRange = IDBKeyRange.bound(1, 10, false, false);

// onlyRange 表明由1个主键值的结合。only() 主要参数则为主键值,整数金额种类。
var onlyRange = IDBKeyRange.only(1);

// lowerRaneg 表明超过等于1的主键值的结合。
// 第2个主要参数可选,为true则表明不包括最少主键1,false则包括,默认设置为false
var lowerRange = IDBKeyRange.lowerBound(1, false);

// upperRange 表明小于等于10的主键值的结合。
// 第2个主要参数可选,为true则表明不包括最大主键10,false则包括,默认设置为false
var upperRange = IDBKeyRange.upperBound(10, false);

openCursor 方式的第2个主要参数表明游标的载入方位,关键有下列几种:

  1. next : 游标中的数据信息按主键值升序排序,主键值相同的数据信息都被载入
  2. nextunique : 游标中的数据信息按主键值升序排序,主键值相同写保护取第1条数据信息
  3. prev : 游标中的数据信息按主键值降序排序,主键值相同的数据信息都被载入
  4. prevunique : 游标中的数据信息按主键值降序排序,主键值相同写保护取第1条数据信息
var request = indexedDB.open('dbName', 6);
// ...
request.onsuccess = function(e){
    var db = e.target.result;
    var tx = db.transaction('Users','readwrite');
    var store = tx.objectStore('Users');
    var range = IDBKeyRange.bound(1,10);
    var req = store.openCursor(range, 'next');
    req.onsuccess = function(){
        var cursor = this.result;
        if(cursor){
            console.log(cursor.value.userName);
            cursor.continue();
        }else{
            console.log('查找完毕');
        }
    }
}

当存在合乎查找标准的数据信息时,能够根据 update 方式升级该数据信息:

cursor.updata({
    userId : cursor.key,
    userName : 'Hello',
    age : 18
});

能够根据 delete 方式删掉该数据信息:

cursor.delete();

能够根据 continue 方式再次载入下1条数据信息,不然读到第1条数据信息以后已不再次载入:

cursor.continue();

总结

从联接数据信息库,建立目标库房、数据库索引,到实际操作、查找数据信息,进行了 indexedDB 存储数据信息的详细步骤。下面根据1个详细的事例来更好地把握 indexedDB 数据信息库。编码详细地址:indexedDB-demo

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服