indexeddb是存储大量结构化数据的api，demo中用到的是异步api，麻烦的就是所有对indexeddb的操作都会发生一个异步的‘请求’，只要熟悉了api操作起来也很简单。
大体流程是这样
1.打开数据库
javascript code
复制内容到剪贴板
varindexeddb=window.indexeddb||window.webkitindexeddb||window.mozindexeddb; if(‘webkitindexeddb’inwindow){ window.idbtransaction=window.webkitidbtransaction; window.idbkeyrange=window.webkitidbkeyrange; } //这个就不解释了 varrequest=indexeddb.open(“adsageidb”);//open：indexeddb只有这一个方法打开（数据库名） request.onsuccess=function(e){//异步 varv=“1.00”; vardb=e.target.result; if(v!=db.version){ vartvrequest=db.tversion(v); tvrequest.onsuccess=function(e){//异步 if(db.objectstorenames.contains(“todo”)){ db.deleteobjectstore(“todo”); } varstore=db.createobjectstore(“todo”,{keypath:“adsid”});//onsuccess后创建objec你比我猜题目大全tstore暂时用到两个参数，数据库&&主键 } } }这样就 创建/连接 了一个数据库
2.创建交互对象 && 监听dom事件 && 处理数据
然后就是要操作数据库了
javascript code
复制内容到剪贴板
//插入数据暂时只插入一列 vartrans=db.transaction([ஸ左右的笔记本推荐8220;todo”],idbtransaction.read_write);//创建transaction varstore=trans.objectstore(“todo”);//创建store //要操作数据必须建立transaction和store vardata={ “text”:todotext, “adsid”:newdate().gettime() };//一个小数据adsid是主键 varrequest=store.put(data);//‘强行’插入 request.onsuccess=function(e){ //成功后执行一些操作 }; request.onerror=function(e){ console.log(“erroradding:“,e); };javascript code
复制内容到剪贴板
//读取数据 vartrans=db.transaction([“todo”],idbtransaction.read_write); varstore=trans.objectstore(“todo”); varkeyrange=idbkeyrange.lowerbound(0); varcursorrequest=store.opencursor(keyrange); //这里用到指针cursor,opencursor的参数keyrange是遍历范围还可以添加遍历方向参数 //另一种方法是get()这个就比较简单了直接store.get(‘键值’)就行 cursorrequest.onsuccess=function(e){ varresult=e.target.result; if(!!result==fal) return; console.log(result.value); result.continue();//循环读取所有数据 };javascript code
复制内容到剪贴板
//删除数据 … store.delete(‘键值’) …出了一个小demo
xml/html code
复制内容到剪贴板
<!doctypehtml><html><head><script>varindexeddb=window.indexeddb||window.webkitindexeddb|| window.mozindexeddb; if(‘webkitindexeddb’inwindow){ windowwindow.idbtr今年三伏天时间表ansaction=window.webkitidbtransaction; windowwindow.idbkeyrange=window.webkitidbkeyrange; } adsageidb={}; adsageidb.db=null; adsageidb.onerror=function(e){ console.log(e); }; adsageidb.open=function(){ varrequest=indexeddb.open(“adsageidb”); request.onsuccess=function(e){ varv=“1.00”; adsageidb.db=e.target.result; vardb=adsageidb.db; if(v!=db.version){ vartvrequest=db.tversion(v); tvrequest.onerror=adsageidb.onerror; tvrequest.onsuccess=function(e){ if(db.objectstorenames.contains(“todo”)){ db.deleteobjectstore(“todo”); } varstore=db.createobjectstore(“todo”, {keypath:“adsid”}); adsageidb.getalltodoitems(); }; } el{ adsageidb.getalltodoitems(); } }; request.onerror=adsageidb.onerror; } adsageidb.addtodo=function(todotext){ vardb=adsageidb.db; vartrans=db.transaction([“todo”],idbtransaction.read_write); varstore=trans.objectstore(“todo”); vardata={ “text”:todotext, &网页登陆qq#8220;adsid”:newdate().gettime() }; varrequest=store.put(data); request.onsuccess=function(e){ adsageidb.getalltodoitems(); }; request.onerror=function(e){ console.log(“erroradding:“,e); }; }; adsageidb.deletetodo=function(id){ vardb=adsage人大会idb.db; vartrans=db.transaction([“todo”],idbtransaction.read_write); varstore=trans.objectstore(“todo”); varrequest=store.delete(id); request.onsuccess=function(e){ adsageidb.getalltodoitems(); }; request.onerror=function(e){ console.log(“erroradding:“,e); }; }; adsageidb.getalltodoitems=function(){ vartodos=document.getelementbyid(“todoitems”); todos.innerhtml=“”; vardb=adsageidb.db; vartrans=db.transaction([“todo”],idbtransaction.read_write); varstore=trans.objectstore(“todo”); varkeyrange=idbkeyrange.lowerbound(0); varcursorrequest=store.opencursor(keyrange); cursorrequest.onsuccess=function(e){ varresult=e.target.result; if(!!result==fal) return; rendertodo(result.value); result.continue(); }; cursorrequest.onerror=adsageidb.onerror; }; functionrendertodo(row){ vartodos=document.getelementbyid(“todoitems”); varli=document.createelement(“li”); vara=document.createelement(“a”); vart=document.createtextnode(row.text); a.addeventlistener(“click”,function(){ adsageidb.deletetodo(row.adsid); },fal); a.textcontent=”[删除]”; li.appendchild(t); li.appendchild(a); todos.appendchild(li) } functionaddtodo(){ vartodo=document.getelementbyid(“todo”); adsageidb.addtodo(todo.value); todo.value=“”; } functioninit(){ adsageidb.open(); } window.addeventlistener(“domcontentloaded”,init,fal); </script></head><body><ulid=“todoitems”></ul><inputtype=“text”id=“todo”name=“todo”placeholder=“adsageidbtext?”/><inputtype=“submit”value=“增加一个idb”onclick=“addtodo();returnfal;”/></body></html>以上这篇html5 初试 indexeddb(推荐)就是www.887551.com分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持www.887551.com。
原文地址：http://www.cnblogs.com/androidshouce/archive/2016/07/21/5690444.html
