圆月山庄资源网

HTML5中indexedDB 数据库的使用实例
网页制作 2024/12/23 佚名
3 2
圆月山庄资源网 Design By www.vgjia.com

前言

在 HTML5 的本地存储中，有一种叫 indexedDB 的数据库，该数据库是一种存储在客户端本地的 NoSQL 数据库，它可以存储大量的数据。从上篇：HTML5 进阶系列：web Storage ，我们知道 web Storage 可以方便灵活的在本地存取简单数据，但是对于大量结构化存储，indexedDB 的优势就更加明显。接下来我们来看看 indexedDB 如何存储数据。

连接数据库

一个网站可以有多个 indexedDB 数据库，但每个数据库的名称是唯一的。我们需要通过数据库名来连接某个具体的数据库。

var request = indexedDB.open('dbName', 1);  // 打开 dbName 数据库
request.onerror = function(e){              // 监听连接数据库失败时执行
    console.log('连接数据库失败');
}
request.onsuccess = function(e){            // 监听连接数据库成功时执行
    console.log('连接数据库成功');
}

我们使用 indexedDB.open 方法来连接数据库，该方法接收两个参数，第一个是数据库名，第二个是数据库版本号。该方法会返回一个 IDBOpenDBRequest 对象，代表一个请求连接数据库的请求对象。我们可以通过监听请求对象的 onsuccess 和 onerror 事件来定义连接成功或失败需执行的方法。

因为 indexedDB API 中不允许数据库中的数据仓库在同一版本中发生变化，所以需要在 indexedDB.open 方法中传入新的版本号来更新版本，避免在同一版本中重复修改数据库。版本号必须为整数！

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

我们通过监听请求对象的 onupgradeneeded 事件来定义数据库版本更新时执行的方法。

关闭数据库

使用 indexedDB.open 连接数据库成功后会返回一个 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 中并没有数据库表，而对象仓库，就是相当于一个数据库表。

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 方法接收两个参数，第一个为对象仓库名，第二个参数为可选参数，值为一个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 方法接收三个参数，第一个为索引名，第二个为数据对象的属性，上例中使用 userName 属性来创建索引，第三个参数为可选参数，值为一个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 方法接收两个参数，第一个参数可以是字符串或数组，字符串时则是一个对象仓库名，数组时则是由对象仓库名组成的数组，transaction 可以对参数中任何一个对象仓库进行操作。第二个参数为事务模式，传入 readonly 时只能对对象仓库进行读操作，无法写操作。可以传入 readwrite 进行读写操作。

操作数据

  1. add() : 增加数据。接收一个参数，为需要保存到对象仓库中的对象。
  2. put() : 增加或修改数据。接收一个参数，为需要保存到对象仓库中的对象。
  3. get() : 获取数据。接收一个参数，为需要获取数据的主键值。
  4. delete() : 删除数据。接收一个参数，为需要获取数据的主键值。
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() 方法可以获取数据，但是需要制定主键值。如果我们想要获取一个区间的数据，可以使用游标。游标通过对象仓库的 openCursor 方法创建并打开。

openCursor 方法接收两个参数，第一个是 IDBKeyRange 对象，该对象创建方法主要有以下几种：

// boundRange 表示主键值从1到10(包含1和10)的集合。
// 如果第三个参数为true，则表示不包含最小键值1，如果第四参数为true，则表示不包含最大键值10，默认都为false
var boundRange = IDBKeyRange.bound(1, 10, false, false);

// onlyRange 表示由一个主键值的集合。only() 参数则为主键值，整数类型。
var onlyRange = IDBKeyRange.only(1);

// lowerRaneg 表示大于等于1的主键值的集合。
// 第二个参数可选，为true则表示不包含最小主键1，false则包含，默认为false
var lowerRange = IDBKeyRange.lowerBound(1, false);

// upperRange 表示小于等于10的主键值的集合。
// 第二个参数可选，为true则表示不包含最大主键10，false则包含，默认为false
var upperRange = IDBKeyRange.upperBound(10, false);

openCursor 方法的第二个参数表示游标的读取方向，主要有以下几种：

  1. next : 游标中的数据按主键值升序排列，主键值相等的数据都被读取
  2. nextunique : 游标中的数据按主键值升序排列，主键值相等只读取第一条数据
  3. prev : 游标中的数据按主键值降序排列，主键值相等的数据都被读取
  4. prevunique : 游标中的数据按主键值降序排列，主键值相等只读取第一条数据
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 方法继续读取下一条数据，否则读到第一条数据之后不再继续读取：

cursor.continue();

总结

从连接数据库，创建对象仓库、索引，到操作、检索数据，完成了 indexedDB 存取数据的完整流程。下面通过一个完整的例子来更好地掌握 indexedDB 数据库。代码地址：indexedDB-demo

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

标签：
html5,indexeddb,html5,indexeddb,实例,indexeddb,删除数据库
圆月山庄资源网 Design By www.vgjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
www.vgjia.com 圆月山庄资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接