IndexedDB的基本概念
var request=window.indexedDB.open('testDB');
HTML5里的本地存储挺重要的，IndexedDB就是这种存储方法中的一种。比淘汰掉的Web SQL Database，IndexedDB更强大、灵活。用的时候得先明白那几个基本概念和原理，毕竟IndexedDB是个事务性数据库系统！它靠对象存储空间存数据，能放不少结构化数据，还有事务操作和索引。跟传统的SQL数据库不太一样的地方在于，IndexedDB是用请求-响应方式运作的。
咱要玩IndexedDB的话，得先用indexedDB.open()这招儿开门见山。它会给你一个叫做IDBOpenDBRequest的玩意儿，不能直接访问数据库。但是别担心，有了这个东西，你就能像按图索骥一样知道怎么去拿到那个数据库！就是有点慢毕竟是异步处理。所以，得先在回调函数里头处理好这事，等到数据库对象真正弄好了再来侃大山似的处理数据。这样才能保证数据准确无误。
创建和打开IndexedDB数据库
function openDB (name) {
var request=window.indexedDB.open(name);
request.onerror=function(e){
console.log('OPen Error!');
};
request.onsuccess=function(e){
myDB.db=e.target.result;
};
} var myDB={
name:'test',
version:1,
db:null
};
openDB(myDB.name);
用 IndexedDB.open()就能搞出或打开个 INDEXEDDB（昵称就是IDB）数据库~当我们嫩芽儿似的往里塞第二个备用参数，比如数据库版本号时，如果跟当前的数据库版本对不上眼的话，就会触动onupgradeneeded大戏也就不能硬掰着去打开比咱家低级的数据库！
看完OK了，创建或开启数据库后，就得搞个东西处理它。比如，在搞定回调函数后，把数据库那啥（名字忘了）丢给自定义myDB对象里，这样后面找起来方便些。
function openDB (name,version) {
var version=version || 1;
var request=window.indexedDB.open(name,version);
request.onerror=function(e){
console.log(e.currentTarget.error.message);
};
request.onsuccess=function(e){
myDB.db=e.target.result;
};
request.onupgradeneeded=function(e){
console.log('DB version changed to '+version);
};
} var myDB={
name:'test',
version:3,
db:null
};
openDB(myDB.name,myDB.version);
数据操作与事务处理
function closeDB(db){
db.close();
}
想往IndexedDB里存东西？先得搞个object store（仓库）呗！用createObjectStore这个办法就能搞定了，接着定好你的仓库名还有键的种类就成了。别忘了，干什么都得在事务里进行，还得指明要动哪个仓库！
function deleteDB(name){
indexedDB.deleteDatabase(name);
}
搞定了Transaction中的对象存储，接下来就可以往里面塞数据。用put能改数据，只要名字一样它会自己换掉；要是名字没见过，那就是新添的记录。想要找哪个数据？用get方法根据名字就能找到！
var myDB={
name:'test',
version:3,
db:null
};
openDB(myDB.name,myDB.version);
setTimeout(function(){
closeDB(myDB.db);
deleteDB(myDB.name);
},500);
删除和更新数据
除了加数据之外，咱们还能动动数据，比如更新或删掉一些记录。想更新哪个记录，就用”put”这个方法，它就能帮你搞定了。要是想把某个store给干掉，那就试试”deleteObjectStore”。只要在升级需要的时候调一下这个函数，保证删除得妥妥的！
每次关掉IndexedDB时，你会看到onclose回调函数被调用，这就是处理背后关库操作的地方。再有，每个新添加的记录里都可以指定其中某个字段当钥匙（keyPath）用。
var transaction=db.transaction([students','taecher']); //打开一个事务，使用students 和teacher object store
var objectStore=transaction.objectStore('students'); //获取students object store
总结与展望
哎呦，看完这篇文章，咱们对HTML5的对象储存解决方案IndexedDB可是有了深度解析！还学到了创建数据库、启动数据库、加入新东西、修改现有、减掉无用等等实用操作。可见，这个由现代浏览器自带的IndexedDB，在做前端开发时可是挺关键的
说白了，IndexedDB会随Web技术的进步而变得越来越好用，所以得好好学学这些新技能！希望这篇文章能帮你更深入地了解HTML5本地存储技术，将来用起来就66哒！
function openDB (name,version) {
var version=version || 1;
var request=window.indexedDB.open(name,version);
request.onerror=function(e){
console.log(e.currentTarget.error.message);
};
request.onsuccess=function(e){
myDB.db=e.target.result;
};
request.onupgradeneeded=function(e){
var db=e.target.result;
if(!db.objectStoreNames.contains('students')){
db.createObjectStore('students',{keyPath:"id"});
}
console.log('DB version changed to '+version);
};
}
。
评论0