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 开展读写能力实际操作。

实际操作数据信息

add() : 提升数据信息。接受1个主要参数，为必须储存到目标库房中的目标。
put() : 提升或改动数据信息。接受1个主要参数，为必须储存到目标库房中的目标。
get() : 获得数据信息。接受1个主要参数，为必须获得数据信息的主键值。
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个主要参数表明游标的载入方位，关键有下列几种：

next : 游标中的数据信息按主键值升序排序，主键值相同的数据信息都被载入
nextunique : 游标中的数据信息按主键值升序排序，主键值相同写保护取第1条数据信息
prev : 游标中的数据信息按主键值降序排序，主键值相同的数据信息都被载入
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

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

技术知识

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

新闻资讯

在线客服