php indexdb,html5使用indexdb的代码实例分享(图文)
前面说过html5对于离线应用的支持是很好的,不禁支持localstorage这样在客户端存储一个键值对的方式而且还可以引用manifest文件,将需要缓存的文件在其中定义,其实html5中还可以使用indexdb,又称索引数据库,该数据库可以用来存储离线对象。下面开始:
请求完成后的回调
所有的请求完成之后都会有一个回调,onsuccess 和onerror,其中:onsuccess表示请求成功时候的回调,onerror 表示请求失败时候的回调。同时还可以使用javascript中的 try/catch来捕获异常,在进一步的处理。
使用数据库
一个数据库一次只能有一个版本,初次创建改数据库的时候版本号是0,当我们需要更改已经创建好的数据库时候,就需要更改其版本号,当更改 版本号的时候,会触发upgradeneeded回调,所以修改数据库或者存储对象的方法必须放到upgradeneeded方法中执行。
判断当前浏览器是否支持indexdbif (!window.indexedDB) {
window.alert("您的浏览器不支持indexdb");
}
Document
function createDatabase(indexDbName) {
//调用 open 方法并传递数据库名称。如果不存在具有指定名称的数据库,则会创建该数据库
var openRequest = indexedDB.open(indexDbName); var db;
openRequest.onerror = function(e) {//当创建数据库失败时候的回调
console.log("Database error: " + e.target.errorCode);
};
openRequest.onsuccess = function(event) {
console.log("Database created");
db = openRequest.result;//创建数据库成功时候,将结果给db,此时db就是当前数据库
//alert("this is :"+db);
};
openRequest.onupgradeneeded = function (evt) {//更改数据库,或者存储对象时候在这里处理
};
}
createDatabase
上面这段代码可以创建一个数据库到客户端。
删除数据库
通过调用 deleteDatabase 方法,并且传入需要删除的数据库名称来删除现有数据库。function deleteDatabase(indexDbName) {
var deleteDbRequest = indexedDB.deleteDatabase(indexDbName);
deleteDbRequest.onsuccess = function (event) {
console.log("detete database success");
};
deleteDbRequest.onerror = function (e) {
console.log("Database error: " + e.target.errorCode);
};
}
存储数据
objectstore
在indexdb中没有表的概念,而是使用objectstore来存储对象的,一个数据库中可以包含多个objectStore,objectStore是一个灵活的数据结构,可以存放多种类型数据。我们可以使用每条记录中的某个指定字段作为键值(keyPath),也可以使用自动生成的递增数字作为键值(keyGenerator),也可以不指定。选择键的类型不同,objectStore可以存储的数据结构也有差异
事物
在更新数据库内容或者插入新的数据时候,需要首先开启到事物,并且需要制定当前事物操作了那些objectstore。
事务具有三种模式只读:read,不能修改数据库数据,可以并发执行
读写:readwrite,可以进行读写操作
版本变更:verionchange因为对新数据的操作都需要在transaction中进行,而transaction又要求指定object store,所以我们只能在创建数据库的时候初始化object store以供后面使用。
指定keyid添加数据
指定keyid,可以理解为指定一个主键//添加数据
function insertAnObj(indexDbName) {
var userinfos=[{
id:1001,
name:"小李",
age:24
},{
id:1002,
name:"老王",
age:30
},{
id:1003,
name:"王麻子",
age:26
}];
var openRequest = indexedDB.open(indexDbName,1);
openRequest.onerror = function(e) {//当创建数据库失败时候的回调
console.log("Database error: " + e.target.errorCode);
};
openRequest.onsuccess = function(event) {
console.log("Database created");
db = openRequest.result; //创建数据库成功时候,将结果给db,此时db就是当前数据库
//alert("this is :"+db);
//打开和userinfo相关的objectstore的事物
var transaction = db.transaction("userinfo",'readwrite');
var store=transaction.objectStore("userinfo");
for(var i=0;i
//alert("add"+userinfos[i]);
store.add(userinfos[i]);//将对象添加至userinfo相关的objectstore中
}
};
openRequest.onupgradeneeded = function(event) {
var db = event.target.result;
//在第一次创建数据库的时候,就创建userinfo相关的objectstore,以供后面添加数据时候使用
if(!db.objectStoreNames.contains('userinfo')){
//keyPath:Javascript对象,对象必须有一属性作为键值
db.createObjectStore('userinfo',{keyPath:"id"});
}
}
}
使用autoIncrement添加数据
指定autoIncrement,可以理解为指定了一个主键自动增长。//指定主键自动增长
function insertAutoInc(indexDbName) {
var userinfos=[{
id:1001,
name:"小李",
age:24
},{
id:1002,
name:"老王",
age:30
},{
id:1003,
name:"王麻子",
age:26
}];
var openRequest = indexedDB.open(indexDbName,2);
openRequest.onerror = function(e) {//当创建数据库失败时候的回调
console.log("Database error: " + e.target.errorCode);
};
openRequest.onsuccess = function(event) {
console.log("Database created");
db = openRequest.result; //创建数据库成功时候,将结果给db,此时db就是当前数据库
//alert("this is :"+db);
//打开和userinfo相关的objectstore的事物
var transaction = db.transaction("userinfo",'readwrite');
var store=transaction.objectStore("userinfo");
for(var i=0;i
//alert("add"+userinfos[i]);
store.add(userinfos[i]);//将对象添加至userinfo相关的objectstore中
}
};
openRequest.onupgradeneeded = function(event) {
var db = event.target.result;
//在第一次创建数据库的时候,就创建userinfo相关的objectstore,以供后面添加数据时候使用
if(!db.objectStoreNames.contains('userinfo')){
//keyPath:Javascript对象,对象必须有一属性作为键值
db.createObjectStore('userinfo',{autoIncrement: true});
}
}
}
查找数据
根据id查找数据
之前我们已经添加过了定义key为autoincreament类型方式的数据,现在就可以根据id来查找单条数据了。function findDbdata(indexDbName,value) {
var openRequest = indexedDB.open(indexDbName);
var db;
openRequest.onerror = function(e) {//当创建数据库失败时候的回调
console.log("Database error: " + e.target.errorCode);
};
openRequest.onsuccess = function(event) {
console.log("Database created");
db = openRequest.result; //创建数据库成功时候,将结果给db,此时db就是当前数据库
var transaction = db.transaction("userinfo",'readwrite');
var objectStore = transaction.objectStore("userinfo");
//var cursor = objectStore.openCursor();
var request = objectStore.get(Number(1));//查找i=1的对象,这里使用Number将1转换成数值类型
request.onsuccess = function(e) {
var res = e.target.result; //查找成功时候返回的结果对象
console.dir(res);
if (res) {
for (var field in res) { //遍历每一个对象属性
console.log(field+":"+res[field]);
// alert(res[field]);
};
};
}
};
openRequest.onupgradeneeded = function (event) {//更改数据库,或者存储对象时候在这里处理
};
}
查找所有数据function findAllDbdata(indexDbName) {
var openRequest = indexedDB.open(indexDbName);
var db;
openRequest.onsuccess = function(event) {
console.log("Database created");
db = openRequest.result; //创建数据库成功时候,将结果给db,此时db就是当前数据库
var transaction = db.transaction("userinfo",'readonly');
var objectStore = transaction.objectStore("userinfo");
var cursor = objectStore.openCursor();
cursor.onsuccess = function(e) {
var res = e.target.result;
if(res) {
console.log("Key", res.key);
var request = objectStore.get(Number(res.key));//根据查找出来的id,再次逐个查找
request.onsuccess = function(e) {
var res = e.target.result; //查找成功时候返回的结果对象
//console.dir(res);
if (res) {
for (var field in res) { //遍历每一个对象属性
console.log(field+":"+res[field]);
// alert(res[field]);
};
};
}
res.continue();
}
}
};
}
根据id删除数据
删除跟新增一样,需要创建事务,然后调用删除接口delete来删除数据function deleteDataById(indexDbName) {
var openRequest = indexedDB.open(indexDbName);
var db;
openRequest.onsuccess = function(event) {
db = openRequest.result; //创建数据库成功时候,将结果给db,此时db就是当前数据库
var transaction = db.transaction("userinfo",'readwrite');
var objectStore = transaction.objectStore("userinfo");
var request = objectStore.delete(Number(2));//根据查找出来的id,再次逐个查找
request.onsuccess = function(e) {
console.log("delete success");
}
}
}
删除所有数据
通过objectstore.clear()删除所有的数据。function deleteAllData(indexDbName) {
var openRequest = indexedDB.open(indexDbName);
var db;
openRequest.onsuccess = function(event) {
db = openRequest.result; //创建数据库成功时候,将结果给db,此时db就是当前数据库
var transaction = db.transaction("userinfo",'readwrite');
var objectStore = transaction.objectStore("userinfo");
objectStore.clear();
}
}
创建索引
我们可以在创建object store的时候指明索引,使用object store的createIndex创建索引,方法有三个参数索引名称
索引属性字段名
索引属性值是否唯一
这里我新创建一个数据库,并且设置基于name和age的索引://指定主键自动增长
function insertAutoInc(indexDbName) {
var userinfos=[{
id:1001,
name:"小李",
age:24
},{
id:1002,
name:"老王",
age:30
},{
id:1003,
name:"王麻子",
age:26
}];
var openRequest = indexedDB.open(indexDbName,2);
openRequest.onerror = function(e) {//当创建数据库失败时候的回调
console.log("Database error: " + e.target.errorCode);
};
openRequest.onsuccess = function(event) {
console.log("Database created");
db = openRequest.result; //创建数据库成功时候,将结果给db,此时db就是当前数据库
//alert("this is :"+db);
//打开和userinfo相关的objectstore的事物
var transaction = db.transaction("userinfo",'readwrite');
var store=transaction.objectStore("userinfo");
for(var i=0;i
//alert("add"+userinfos[i]);
store.add(userinfos[i]);//将对象添加至userinfo相关的objectstore中
}
};
openRequest.onupgradeneeded = function(event) {
var db = event.target.result;
//在第一次创建数据库的时候,就创建userinfo相关的objectstore,以供后面添加数据时候使用
if(!db.objectStoreNames.contains('userinfo')){
//keyPath:Javascript对象,对象必须有一属性作为键值
var objectStore = db.createObjectStore('userinfo',{autoIncrement: true});
objectStore.createIndex('nameIndex','name',{unique:true});//这里假定名字不能重复,创建基于name的唯一索引
objectStore.createIndex('ageIndex','age',{unique:false});//创建基于age的索引
}
}
}
利用索引查询数据
可以利用索引快速获取数据,name的索引是唯一的没问题,但是对于age索引只会取到第一个匹配值,要想得到所有age符合条件的值就需要使用游标了function getDataByIndex(indexDbName) {
var openRequest = indexedDB.open(indexDbName); var db;
openRequest.onerror = function(e) {//当创建数据库失败时候的回调
console.log("Database error: " + e.target.errorCode);
};
openRequest.onsuccess = function(event) {
console.log("Database created");
db = openRequest.result; //创建数据库成功时候,将结果给db,此时db就是当前数据库
var transaction = db.transaction("userinfo",'readwrite');
var objectStore = transaction.objectStore("userinfo");
var nameIndex = objectStore.index("nameIndex"); //获得nameIndex索引
nameIndex.get("小李").onsuccess = function(e) { //根据name索引获得数据成功的回调
var userinfo = e.target.result;
console.log("id:"+userinfo.id+"==name:"+userinfo.name+"==age:"+userinfo.age);
}
}
}
游标和索引结合使用
刚才我们不仅创建了一个name的唯一索引,而且还创建了一个age的索引,如果我们根据age来获取数据,有可能会有多条,由于age不唯一,所以这个时候就需要使用游标来遍历数据。这里我先插入两条age=24的记录。
function getDataByAgeIndex(indexDbName) {
var openRequest = indexedDB.open(indexDbName); var db;
openRequest.onerror = function(e) {//当创建数据库失败时候的回调
console.log("Database error: " + e.target.errorCode);
};
openRequest.onsuccess = function(event) {
console.log("Database created");
db = openRequest.result; //创建数据库成功时候,将结果给db,此时db就是当前数据库
var transaction = db.transaction("userinfo",'readwrite');
var objectStore = transaction.objectStore("userinfo");
var nameIndex = objectStore.index("ageIndex"); //获得ageIndex索引
var request = nameIndex.openCursor();//openCursor没有参数的时候,表示获得所有数据
request.onsuccess = function(e) {//openCursor成功的时候回调该方法
var cursor = e.target.result; if (cursor) {//循环遍历cursor
var userinfo = cursor.value; //alert(userinfo.name);
console.log("id:"+userinfo.id+"==name:"+userinfo.name+"==age:"+userinfo.age);
cursor.continue();
};
}
}
}
同时可以在opencursor的时候传入key range,来限制范围。
IDBKeyRange.only(value):只获取指定数据
IDBKeyRange.lowerBound(value,isOpen):获取最小是value的数据,第二个参数用来指示是否排除value值本身,也就是数学中的是否是开区间
IDBKeyRange.upperBound(value,isOpen):和上面类似,用于获取最大值是value的数据
IDBKeyRange.bound(value1,value2,isOpen1,isOpen2):表示在value1和value2之间,是否包含value1和value2
这里为了演示方便,我先删除之前的数据库,重新插入更多的数据,现在所有数据如下:
IDBKeyRange.only(value)
这里只需要在上面opencursor的时候将该限制条件传入即可,其他代码将保持不变,如下:var request = nameIndex.openCursor(IDBKeyRange.only(Number(24)));
这里只根据age索引查询age==24的所有数据。
IDBKeyRange.lowerBound(value,isOpen)
在使用IDBKeyRange.lowerBound(28,true)来获取年龄大于28的并且包含28岁的所有数据。var request = nameIndex.openCursor(IDBKeyRange.lowerBound(Number(28),true));
ok,今天就到这里了,希望大家喜欢。
php indexdb,html5使用indexdb的代码实例分享(图文)相关推荐
- HTML绘制齿轮,HTML5模拟齿轮动画代码实例
HTML代码 css代码#level{ width:100%; height:1px; position:absolute; top:50%; } #content{ text-align:cente ...
- java 代码压缩javascript_通过Java压缩JavaScript代码实例分享
通过移除空行和注释来压缩 javascript 代码 /** * this file is part of the echo web application framework (hereinafte ...
- Java实现MD5加密及解密的代码实例分享
如果对安全性的需求不是太高,MD5仍是使用非常方便和普及的加密方式,比如Java中自带的MessageDigest类就提供了支持,这里就为大家带来Java实现MD5加密及解密的代码实例分享: 基础:M ...
- php md5加密 java代码_Java实现MD5加密及解密的代码实例分享
基础:MessageDigest类的使用 其实要在Java中完成MD5加密,MessageDigest类大部分都帮你实现好了,几行代码足矣:/** * 对字符串md5加密 * * @param str ...
- java timer demo_java中任务调度java.util.Timer,ScheduledExecutor,Quartz的机制说明和demo代码实例分享...
目前的 Web 应用,多数应用都具备任务调度的功能.这里就简单的介绍任务调度的Java 实现方法,主要包括 Timer,Scheduler, Quartz 以及 JCron Tab,目的在于给需要开发 ...
- java php同时访问数据库,Java Spring中同时访问多种不同数据库的代码实例分享
开发企业应用时我们常常遇到要同时访问多种不同数据库的问题,有时是必须把数据归档到某种数据仓库中,有时是要把数据变更推送到第三方数据库中.使用Spring框架时,使用单一数据库是非常容易的,但如果要同时 ...
- php猜数游戏63,PHP实现猜数游戏的代码实例分享
猜数游戏有两种玩法: 第一种:两个人玩,一方出数字,一方猜.出数字的人要想好一个指定位数的数,数字可重复,不能让猜的人知道. 猜的人就可以开始猜.每猜一个数,出数者就要说大过或小过出的数. 第二种:两 ...
- php推送示例wordpress,给WordPress的编辑后台添加提示框的代码实例分享
WordPress 3.5 新添加了一个提示框功能,可以创建一个提示框,然后指向任何元素,比如下边的例子: 本文就来教你怎么创建一个这样的提示框. 首先需要添加提示框 的脚本,这样才能使用提示框的 J ...
- md5视频加密 java代码,Java实现MD5加密及解密的代码实例分享
基础:MessageDigest类的使用 其实要在Java中完成MD5加密,MessageDigest类大部分都帮你实现好了,几行代码足矣: /** * 对字符串md5加密 * * @param st ...
最新文章
- TC(Table Control)自定义F4
- 专栏 | 基于 Jupyter 的特征工程手册:数据预处理(三)
- RO段、RW段和ZI段 转载:RO段、RW段和ZI段
- Android O 前期预研之一:Android Treble 计划
- 使用Ubuntu的公用文件夹轻松地在计算机之间共享文件
- 【CodeForces - 1201C】Maximum Median(思维,水题)
- [数位DP]JZOJ 3363 Number
- mysql2005安装asp_asp连接sql server2005数据库
- hp linux 禁用u盘启动项,惠普台式机UEFI BIOS设置U盘启动
- 博弈论总结(题目合集)
- 过 DNF TP 驱动保护(二)
- Vue中如何根据svg内容显示图片
- Elasticsearch/Kibana 视频学习网址(亲测视频很好)
- 可乐瓶游戏c语言,小班体育游戏《玩可乐瓶》教案
- 狼人杀游戏法官主持软件和会员管理积分系统开发
- 群联AI云防护的优势所在
- Cena评测系统在win10中测评cpp程序
- 2022集创赛安谋科技杯简析公开课文字版(建议结合视频一起看)
- RecyclerView 横向滑动
- 在Vue项目中使用echarts完成迁徙图(Map组件)