介绍
indexeddb是html5 web数据库，允许html5 web应用在用户浏览器端存储数据。对于应用来说indexeddb非常强大、有用，可以在客户端的chrome,ie,firefox等web浏览器中存储大量数据，下面简单介绍一下indexeddb的基本概念。
什么是indexeddb
indexeddb，html5新的数据存储，可以在客户端存储、操作数据，可以使应用加载地更快，更好地响应。它不同于关系型数据库，拥有数据表、记录。它影响着我们设计和创建应用程序的方式。indexeddb 创建有数据类型和简单的javascript持久对象的object，每个object可以有索引，使其有效地查询和遍历整个集合。本文为您提供了如何在web应用程序中使用indexeddb的真实例子。
开始
我们需要在执行前包含下面前置代码
javascript code
复制内容到剪贴板
varindexeddb=window.indexeddb||window.mozindexeddb||window.webkitindexeddb||window.msindexeddb; //prefixesofwindow.idbobjects varidbtransaction=window.idbtransaction||window.webkitidbtransaction||window.msidbtransaction; var晚霞唯美的短句子idbkeyrange=window.idbkeyrange||window.webkitidbkeyrange||window.msidbkeyrange if(!indexeddb){ alert(“yourbrowrdoesn’tsupportastableversionofindexeddb.”) }
打开indexeddb
在创建数据库之前，我们首先需要为数据库创建数据，假设我们有如下的用户信息：
javascr中考倒计时ipt code
复制内容到剪贴板
varurdata=[ {id:“1”,name:“tapas”,age:33,email:“tapas@example.com”}, {id:“2”,name:“bidulata”,age:55,email:“bidu@home.com”} ]; 现在我们需要用open()方法打开我们的数据库:
javascript code
复制内容到剪贴板
vardb; varrequest=indexeddb.open(“databaname”,1); request.onerror=function(e){ console.log(“error:“,e); }; request.onsuccess=function(e){ db=request.result; console.log(“success:“+db); }; request.onupgradeneeded=function(e){ } 如上所示，我们已经打开了名为”databaname”，指定版本号的数据库，open()方法有两个参数：
1.第一个参数是数据库名称，它会检测名称为”databaname”的数据库是否已经存在，如果存在则打开它，否则创建新的数据库。
2.第二个参数是数据库的版本，用于用户更新数据库结构。
onsuccess处理
发生成功事件时“onsuccess”被触发，如果所有成功的请求都在此处理，我们可以通过赋值给db变量保存请求的结果供以后使用。
onerror的处理程序
发生错误事件时“onerror”被触发，如果打开数据库的过程中失败。
onupgradeneeded处理程序
如果你想更新数据库（创建，删除或修改数据库），那么你必须实现onupgradeneeded处理程序，使您可以在数据库中做任何更改。 在“onupgradeneeded”处理程序中是可以改变数据库的结构的唯一地方。
创建和添加数据到表：
indexeddb使用对象存储来存储数据，而不是通过表。 每当一个值存储在对象存储中，它与一个键相关联。 它允许我们创建的任何对象存储索引。 索引允许我们访问存储在对象存储中的值。 下面的代码显示了如何创建对象存储并插入预先准备好的数据：
javascript code
复制内容到剪贴板
request.onupgradeneeded=function(event){ varobjectstore=event.target.result.createobjectstore(“urs”,{keypath:“id”}); for(variinurdata){ objectstore.add(urdata[i]); } } 我们使用createobjectstore（）方法创建一个对象存储。 此方法接受两个参数： – 存储的名称和参数对象。 在这里，我们有一个名为”urs”的对象存储，并定义了keypath，这是对象唯一性的属性。 在这里，我们使用“id”作为keypath，这个值在对象存储中是唯一的，我们必须确保该“id”的属性在对象存储中的每个对象中存在。 一旦创建了对象存储，我们可以开始使用for循环添加数据进去。
手动将数据添加到表：
我们可以手动添加额外的数据到数据库中。
javascript code
复制内容到剪贴板
functionadd(){ varrequest=db.transaction([“urs”],“readwrite”).objectstore(“urs”) .add({id:“3”,name:“gautam”,age:30,email:“gautam@store.org”}); request.onsuccess=function(e){ alert(“gautamhasbeenaddedtothedataba.”); }; reques琵琶行歌曲t.onerror=function(e){ alert(“unabletoaddtheinformation.”); } } 之前我们在数据库中做任何的crud操作（读，写，修改），必须使用事务。 该transaction()方法是用来指定我们想要进行事务处理的对象存储。 transaction()方法接受3个参数（第二个和第三个是可选的）。 第一个是我们要处理的对象存储的列表，第二个指定我们是否要只读/读写，第三个是版本变化。
从表中读取数据
get()方法用于从对象存储中检索数据。 我们之前已经设置对象的id作为的keypath，所以get()方法将查找具有相同id值的对象。 下面的代码将返回我们命名为“bidulata”的对象：
javascript code
复制内容到剪贴板
functionread(){ varobjectstore=db.transaction([“urs”]).objectstore(“urs”); varrequest=objectstore.get(“2”); request.onerror=function(event){ alert(“unabletoretrievedatafromdataba!”); }; request.onsuccess=function(event){ if(request.result){ alert(“name:”+request.result.name+“,age:”+request.result.age+“,email:”+request.result.email); }el{ alert(“bidulatacouldn’tbefoundinyourdataba!”); } }; }
从表中读取所有数据
下面的方法检索表中的所有数据。 这里我们使用游标来检索对象存储中的所有数据：
javascript code
复制内容到剪贴板
functionreadall(){ varobjectstore=db.transaction(“urs”).objectstore(“urs”); varreq=objectstore.opencursor(); req.onsuccess=function(event){ db.clo(); varres=event.target.result; if(res){ alert(“key”+res.key+”is”+res.value.name+“,age:”+res.value.age+“,email:”+res.value.email); res.continue(); } }; req.onerror=function(e){ console.log(“errorgetting:“,e); }; } 该opencursor()用于遍历数据库中的多个记录。 在continue()函数中继续读取下一条记录。
删除表中的记录
下面的方法从对象中删除记录。
javascript code
复制内容到剪贴板
functionremove(){ varrequest=db.transaction([“urs”],“readwrite”).objectstore(“urs”).delete(“1”); request.onsuccess=function(event){ alert(“tapas’ntryhasbeenremovedfromyourdataba.”); }; } 我们要将对象的keypath作为参数传递给delete()方法。
最终代码
下面的方法从对象源中删除一条记录：
javascript code
复制内容到剪贴板
<!doctypeht韩非子寓言ml> <head> <metahttp-equiv=“content-type”content=“text/html;chart=utf-8”/> <title>indexeddb</title> <scripttype=“text/javascript”> varindexeddb=window.indexeddb||window.mozindexeddb||window.webkitindexeddb||window.msindexeddb; //prefixesofwindow.idbobjects varidbtransaction=window.idbtransaction||window.webkitidbtransaction||window.msidbtransaction; varidbkeyrange=window.idbkeyrange||window.webkitidbkeyrange||window.msidbkeyrange if(!indexeddb){ alert(“yourbrowrdoesn’tsupportastableversionofindexeddb.”) } varcustomerdata=[ {id:“1”,name:“tapas”,age:33,email:“tapas@example.com”}, {id:“2”,name:“bidulata”,age:55,email:“bidu@home.com”} ]; vardb; varrequest=indexeddb.open(“newdataba”,1); request.onerror=function(e){ console.log(“error:“,e); }; request.onsuccess=function(e){ db=request.result; console.log(“success:“+db); }; request.onupgradeneeded=function(event){ } request.onupgradeneeded=function(event){ varobjectstore=event.target.result.createobjectstore(“urs”,{keypath:“id”}); for(variinurdata){ objectstore.add(urdata[i]); } } functionadd(){ varrequest=db.transaction([“urs”],“readwrite”) .objectstore(“urs”) .add({id:“3”,name:“gautam”,age:30,email:“gautam@store.org”}); request.onsuccess=function(e){ alert(“gautamhasbeenaddedtothedataba.”); }; request.onerror=function(e){ alert(“unabletoaddtheinformation.”); } } functionread(){ varobjectstore=db.transaction(“urs”).objectstore(“urs”); varrequest=objectstore.get(“2”); request.onerror=function(event){ alert(“unabletoretrievedatafromdataba!”); }; request.onsuccess=function(event){ if(request.result){ alert(“name:”+request.result.name+“,age:”+request.result.age+“,email:”+request.result.email); }el{ alert(“bidulatacouldn’tbefoundinyourdataba!”); } }; } functionreadall(){ varobjectstore=db.transaction(“urs”).objectstore(“urs”); varreq=objectstore.opencursor(); req.onsuccess=function(event){ db.clo(); varres=event.target.result; if(res){ alert(“key”+res.key+”is”+res.value.name+“,age:”+res.value.age+“,email:”+res.value.email); res.continue(); } }; req.onerror=function(e){ console.log(“errorgetting:“,e); }; } functionremove(){ varrequest=db.transaction([“urs”],“readwrite”).objectstore(“urs”).delete(“1”); request.onsuccess=function(event){ alert(“tapas’ntryhasbeenremovedfromyourdataba.”); }; } </script> </head> <body> <buttononclick=“add()”>addrecord</button> <buttononclick=“remove()”>deleterecord</button> <buttononclick=“read()”>retrievesinglerecord</button> <buttononclick=“readall()”>retrieveallrecords</button> </body> </html> 锁
localstorage是不带lock功能的。那么要实现前端的数据共享并且需要lock功能那就需要使用其它本储存方式，比如indexeddb。indededdb使用的是事务处理的机制，那实际上就是lock功能。
做这个测试需要先简单的封装下indexeddb的操作，因为indexeddb的连接比较麻烦，而且两个测试页面都需要用到
javascript code
复制内容到剪贴板
//db.js //封装事务操作 idbdataba.prototype.dotransaction=function(f){ f(this.transaction([“obj”],”readwrite”).objectstore(“obj”)); }; //连接数据库，成功后调用main函数 (function(){ //打开数据库 varcn=indexeddb.open(“testdb”,1); //创建数据对象 cn.onupgradeneeded=function(e){ e.target.result.小绿豆createobjectstore(“obj”); }; //数据库连接成功 cn.onsuccess=function(e){ main(e.target.result); }; })(); 接着是两个测试页面 <scriptsrc=“db.js”></script> <script> //a.html functionmain(e){ (functioncallee(){ //开始一个事务 e.dotransaction(function(e){ e.put(1,”test”);//设置test的值为1 e.put(2,”test”);//设置test的值为2 }); ttimeout(callee); })(); }; </script> <scriptsrc=“db.js”></script> <script> //b.html functionmain(e){ (functioncallee(){ //开始一个事务 e.dotransaction(function(e){ //获取test的值 e.get(“test”).onsuccess=function(e){ console.log(e.target.result); }; }); ttimeout(callee); })(); }; </script> 把localstorage换成了indexeddb事务处理。但是结果就不同
测试的时候b.html中可能不会立即有输出，因为indexeddb正忙着处理a.html东西，b.html事务丢在了事务丢队列中等待。但是无论如何，输出结果也不会是1这个值。因为indexeddb的最小处理单位是事务，而不是localstorage那样以表达式为单位。这样只要把lock和unlock之间需要处理的东西放入一个事务中即可实现。另外，浏览器对indexeddb的支持不如localstorage，所以使用时还得考虑浏览器兼容。
