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){ varsetVrequest=db.setVersion(v); setVrequest.onsuccess=function(e){//异步 if(db.objectStoreNames.contains("todo")){ db.deleteObjectStore("todo"); } varstore=db.createObjectStore("todo",{keyPath:"adsid"});//onsuccess后创建ObjectStore暂时用到两个参数，数据库&&主键 } } }
这样就 创建/连接 了一个数据库
2.创建交互对象 && 监听dom事件 && 处理数据
然后就是要操作数据库了
JavaScript Code复制内容到剪贴板 //插入数据暂时只插入一列 vartrans=db.transaction(["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==false) 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.IDBTransaction=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){ varsetVrequest=db.setVersion(v); setVrequest.onerror=adsageIDB.onerror; setVrequest.onsuccess=function(e){ if(db.objectStoreNames.contains("todo")){ db.deleteObjectStore("todo"); } varstore=db.createObjectStore("todo", {keyPath:"adsid"}); adsageIDB.getAllTodoItems(); }; } else{ 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, "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=adsageIDB.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==false) 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); },false); 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,false); </script> </head> <body> <ulid="todoItems"></ul> <inputtype="text"id="todo"name="todo"placeholder="adsageIDBtext?"/> <inputtype="submit"value="增加一个IDB"onclick="addTodo();returnfalse;"/> </body> </html>
以上这篇html5 初试 indexedDB(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持查字典教程网。
原文地址：http://www.cnblogs.com/androidshouce/archive/2016/07/21/5690444.html