html5 indexeddb,关于使用html5提供的indexeddb的一下心得 -凯发k8官方网
一：什么是indexeddb？
indexeddb是html5实现本地存储一个小型数据库，并且在chome，ie等主流浏览器已经得到很好的支持，
indexeddb是为了能够在客户端存储大量的结构化数据，并且使用索引高效检索的api。但是这些api的使用很纠结，就是大多数的api全是异步执行。它存储的数据格式是json对象格式，由键值对表示，像这样：
具体操作：f12，找resorce，找indexeddb
二：我使用indexeddb的问题
使用indexeddb的时候会出现很多比较纠结的情况，因为它的很多基本操作都是异步执行的，官方文档说提供的有同步的api，但是直到最后也没有找到，再加上js这种弱类型的语言，刚接触的时候是在让我苦不堪言。特在此总结下我在使用indexeddb时遇到的问题和最终的凯发k8官方网的解决方案，希望有用。
三：基本使用
1，建立数据库：
var mydb={
dbname="testdb",
db=null
}
var request=window.indexeddb.open(mydb.dbname);
解释：这个语句表示打开一个名叫testdb的数据库，如果该数据库不存在，会自动创建一个名为textdb的数据库。这个requese提供三个回调函数，分别是onsuccess()，onerror(),onupgrandeneed(). 这三个函数分别在打开或者创建数据库成功，失败，更新时候调用。
requese.onsuccess=function(e){
console.log("打开数据库成功，db===" e.target.result);
mydb.db=e.target.result;
}
这个地方的e.target.result就是已经打开的数据库对象db，接下来的任何操作都要用到这个db，所以最好把这个代码封装成一个函数，用回调函数的方法，直接返回一个db，以便于后来操作。 同理，onerror方法就是在打开数据库失败的时候调用，可以在onerror函数里打印错误信息，例如：
request.οnerrοr=function(e){
console.log("打开数据库失败，错误信息为：" e.terget.error.message);
}
重要的说一下第三个函数，onupgrandeneed()，这个函数在数据库需要更新的时候调用，比如，第一次创建数据库的时候或者是数据库新添加了objectstore时，(objectstore相当于表的概念)。例如：
request.onupgrandeneed=function(e){
var objectstore=mydb.db.createobjectstore("objectstore1",{keypath:"id"});
var objectstore2=mydb.db.createobjectstore2("objectstore2",{keypath:"id"});
//给objectstore2表加一个索引
objectstore2.creatindex("timeindex","time",{unique:false});
}
解释一下：creatobjectstore()函数，用于建一个objectstore，而objectstore的概念相当于在其他数据库中的表的概念。该函数的两个参数分别为(表名称，主键)。
这里说主键并不准确，但是跟主键的概念很像，请原谅我的简单粗暴。 在这里值得注意的就是：存进去的数据，必须有这个keypath的键，否则会报错，而其他的无所谓，可有可无，看你的需求。如果你要使用索引的话，那么这个索引值得字段也必须有的。
creatindex()函数的三个参数分别是(索引名称，以哪个字段做索引，是否唯一)
2,使用回调函数获取db对象
var mydb={
dbname="testdb",
db=null
}
opendb：function(callback){
var request=window.indexeddb.open(mydb.dbname);
requese.onsuccess=function(e){
console.log("打开数据库成功，db===" e.target.result);
mydb.db=e.target.result;
callback( mydb.db);
}
}
这里的callback是一个函数，当调用opendb方法的时候，需要传进来一个函数作为参数。在onsuccess()函数里，调用callback，把获得到的db对象传给调用opendb的对象。具体使用下边有。
解释一下用这种办法获取db的原因： 因为onsuccess的调用是在打开数据库成功之后，而这个函数是异步调用的，也就是说，你不知道什么时候db是存在的，如果直接return db，得到的会是undefined。而使用js的回调，会很巧妙的避免这个问题。
3,增加一条记录
opendb(function(db){
var transaction=db.transaction("objectstore1","readwrite");
var objectstore=transaction.objectstore("objectstore2");
var value={"id":001,"time":2013.01.02};
var request=objectstore.put(value);
//这个地方也可以用add，跟put的区别是add不会覆盖如果已经存在的数据，而put会覆盖。
request.onsuccess=function(e){
console.log("插入成功");
}
transaction.oncomplete=function(){
console.log("这个时候才是真的插入成功了");
}
});
这个地方有几个微妙的地方
1,定义的value必须有你建立objectstore的时候定义的keypath和索引值
2，transaction.oncomplete字面意思是事务提交，顾名思义，就是在定义的这个事务全部执行完成的时候，才会执行的。只有在这个函数执行之后，再去表里查询这条数据，才会有，否则会查不到，哪怕是在onsuccess执行之后马上查询，也是查询不到的。当初为这个问题纠结很久，这跟传统的关系型数据库相差较大。
3,关于事务的定义，如果需要批量插入数据，事务的定义要定义在循环之外，否则会很大程度的影响插入效率。例如
4,要注意transaction的权限问题，readonly代表只读，readwrite代表读写。 默认是readonly
opendb(function(db){
var transaction=db.transaction("objectstore1","readwrite");
var objectstore=transaction.objectstore("objectstore2");
for(var i=0;i<1000;i ){
var value={"id":i,"time":2013.01.02};
var request=objectstore.put(value);
//这个地方也可以用add，跟put的区别是add不会覆盖如果已经存在的数据，而put会覆盖。
request.onsuccess=function(e){
console.log("插入成功");
}
}
transaction.oncomplete=function(){
console.log("这个时候才是真的插入成功了");
}
});
像这样，把transaction定义在for循环外边，1000条数据会秒插入。当初为了省事，把插入直接封装成一个函数，在这个函数里定义事务，会很慢，十几秒才把1000条数据插入完，慢的我怀疑人生。后来改成把transaction也传进来，但是这会导致transaction失效。会报：this transaction is not activited。
4,删除一条记录
opendb(function(db){
var transaction=db.transaction("objectstore2",'readwrite');
var store=transaction.objectstore("objectstore2");
store.delete(key);
}
});
//简单粗暴，不多解释
###5,修改一条记录
opendb(function(db){
var transaction=db.transaction("objectstore2",'readwrite');
var store=transaction.objectstore("objectstore2");
var request=store.get(key);
request.onsuccess=function(e){
var model=e.target.result;
model.time=2015.09.09;
store.put(model);
};
}
});
//查出来，修改，再放进去覆盖掉。
###5,查询一条记录
按keypath查询
opendb(function(db){
var transaction=db.transaction("objectstore2",'readonly');
var store=transaction.objectstore("objectstore2");
var request=store.get(key);
request.onsuccess=function(e){
var model=e.target.result;
//这个地方最好也用回调函数把查到的值返回回去。方法同opendb()
};
}
});
游标查询全部
opendb(function(db){
var transaction=db.transaction("objectstore2",'readonly');
var array=new array();
var store=transaction.objectstore("objectstore2");
var request=store.opencursor();
request.onsuccess=function(){
var cursor=e.target.result;
if(cursor){
array.push(cursor.value);
cursor.continue();
}else{
// callback(array);
//在这里可以把数组返回回去。同opendb()
//也可以在transaction的oncomplete()中把数组返回回去。
}
}
}
});
未完待补充
总结
以上是凯发k8官方网为你收集整理的html5 indexeddb,关于使用html5提供的indexeddb的一下心得的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇：
- 下一篇：