当前第2页 返回上一页
操作数据
add() : 增加数据。接收一个参数,为需要保存到对象仓库中的对象。
put() : 增加或修改数据。接收一个参数,为需要保存到对象仓库中的对象。
get() : 获取数据。接收一个参数,为需要获取数据的主键值。
delete() : 删除数据。接收一个参数,为需要获取数据的主键值。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 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);
req2.onsuccess = function (){
console.log( this .result.userName);
}
var req3 = store. delete (1);
req3.onsuccess = function (){
console.log( '删除数据成功' );
}
}
|
add 和 put 的作用类似,区别在于 put 保存数据时,如果该数据的主键在数据库中已经有相同主键的时候,则会修改数据库中对应主键的对象,而使用 add 保存数据,如果该主键已经存在,则保存失败。
检索数据
上面我们知道使用 get() 方法可以获取数据,但是需要制定主键值。如果我们想要获取一个区间的数据,可以使用游标。游标通过对象仓库的 openCursor 方法创建并打开。
openCursor 方法接收两个参数,第一个是 IDBKeyRange 对象,该对象创建方法主要有以下几种:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var boundRange = IDBKeyRange.bound(1, 10, false , false );
var onlyRange = IDBKeyRange.only(1);
var lowerRange = IDBKeyRange.lowerBound(1, false );
var upperRange = IDBKeyRange.upperBound(10, false );
|
openCursor 方法的第二个参数表示游标的读取方向,主要有以下几种:
next : 游标中的数据按主键值升序排列,主键值相等的数据都被读取
nextunique : 游标中的数据按主键值升序排列,主键值相等只读取第一条数据
prev : 游标中的数据按主键值降序排列,主键值相等的数据都被读取
prevunique : 游标中的数据按主键值降序排列,主键值相等只读取第一条数据
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 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 方法更新该数据:
1 2 3 4 5 | cursor.updata({
userId : cursor.key,
userName : 'Hello' ,
age : 18
});
|
可以通过 delete 方法删除该数据:
可以通过 continue 方法继续读取下一条数据,否则读到第一条数据之后不再继续读取:
总结
从连接数据库,创建对象仓库、索引,到操作、检索数据,完成了 indexedDB 存取数据的完整流程。下面通过一个完整的例子来更好地掌握 indexedDB 数据库。代码地址:indexedDB-demo
【相关推荐】
1. 特别推荐:“php程序员工具箱”V0.1版本下载
2. 免费h5在线视频教程
3. php.cn原创html5视频教程
以上就是HTML5中indexedDB 数据库的相关介绍的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
HTML5前端是什么?
HTML5 history模式是什么
HTML5地理定位实例讲解
通过HTML5中的canvas来绘制一个圆环形进度条
如何从javascript到typescript?
HTML5移动端-viewport的详解
HTML5 video视频字幕的使用和制作方法
详解HTML5头部<meta>标签的常用信息小结
HTML5的存储方式sessionstorage和localstorage详解
HTML5边玩边学(十)-俄罗斯方块之控制界面篇(源码)
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » HTML5中indexedDB 数据库的相关介绍