html5 初试 indexedDB(推荐)

网络
已经是深秋了，森林里那一望无际的林木都已光秃，让褐色的苔掩住它身上的皱纹。无情的秋天剥下了它们美丽的衣裳，它们只好枯秃地站在那里。

indexedDB是存储大量结构化数据的API，demo中用到的是异步API，麻烦的就是所有对indexedDB的操作都会发生一个异步的‘请求’，只要熟悉了API操作起来也很简单。

大体流程是这样

1.打开数据库

JavaScript Code复制内容到剪贴板
  1. varindexedDB=window.indexedDB||window.webkitIndexedDB||window.mozIndexedDB;
  3. if('webkitIndexedDB'inwindow){
  4. window.IDBTransaction=window.webkitIDBTransaction;
  5. window.IDBKeyRange=window.webkitIDBKeyRange;
  6. }
  7. //这个就不解释了
  9. varrequest=indexedDB.open("adsageIDB");//open：indexedDB只有这一个方法打开（数据库名）
  10. request.onsuccess=function(e){//异步
  11. varv="1.00";
  12. vardb=e.target.result;
  14. if(v!=db.version){
  15. varsetVrequest=db.setVersion(v);
  16. setVrequest.onsuccess=function(e){//异步
  17. if(db.objectStoreNames.contains("todo")){
  18. db.deleteObjectStore("todo");
  19. }
  20. varstore=db.createObjectStore("todo",{keyPath:"adsid"});//onsuccess后创建ObjectStore暂时用到两个参数，数据库&&主键
  21. }
  22. }
  23. }

这样就 创建/连接 了一个数据库

2.创建交互对象 && 监听dom事件 && 处理数据

然后就是要操作数据库了

JavaScript Code复制内容到剪贴板
  1. //插入数据暂时只插入一列
  2. vartrans=db.transaction(["todo"],IDBTransaction.READ_WRITE);//创建transaction
  3. varstore=trans.objectStore("todo");//创建Store
  4. //要操作数据必须建立transaction和Store
  6. vardata={
  7. "text":todoText,
  8. "adsid":newDate().getTime()
  9. };//一个小数据adsid是主键
  11. varrequest=store.put(data);//‘强行’插入
  13. request.onsuccess=function(e){
  14. //成功后执行一些操作
  15. };
  17. request.onerror=function(e){
  18. console.log("ErrorAdding:",e);
  19. };
JavaScript Code复制内容到剪贴板
  1. //读取数据
  2. vartrans=db.transaction(["todo"],IDBTransaction.READ_WRITE);
  3. varstore=trans.objectStore("todo");
  5. varkeyRange=IDBKeyRange.lowerBound(0);
  6. varcursorRequest=store.openCursor(keyRange);
  7. //这里用到指针cursor,openCursor的参数keyRange是遍历范围还可以添加遍历方向参数
  8. //另一种方法是get()这个就比较简单了直接store.get('键值')就行
  10. cursorRequest.onsuccess=function(e){
  11. varresult=e.target.result;
  12. if(!!result==false)
  13. return;
  15. console.log(result.value);
  16. result.continue();//循环读取所有数据
  17. };
JavaScript Code复制内容到剪贴板
  1. //删除数据
  2. ...
  3. store.delete('键值')
  4. ...

出了一个小demo

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <script>
  5. varindexedDB=window.indexedDB||window.webkitIndexedDB||
  6. window.mozIndexedDB;
  8. if('webkitIndexedDB'inwindow){
  9. windowwindow.IDBTransaction=window.webkitIDBTransaction;
  10. windowwindow.IDBKeyRange=window.webkitIDBKeyRange;
  11. }
  13. adsageIDB={};
  14. adsageIDB.db=null;
  16. adsageIDB.onerror=function(e){
  17. console.log(e);
  18. };
  20. adsageIDB.open=function(){
  21. varrequest=indexedDB.open("adsageIDB");
  23. request.onsuccess=function(e){
  24. varv="1.00";
  25. adsageIDB.db=e.target.result;
  26. vardb=adsageIDB.db;
  28. if(v!=db.version){
  29. varsetVrequest=db.setVersion(v);
  31. setVrequest.onerror=adsageIDB.onerror;
  32. setVrequest.onsuccess=function(e){
  33. if(db.objectStoreNames.contains("todo")){
  34. db.deleteObjectStore("todo");
  35. }
  37. varstore=db.createObjectStore("todo",
  38. {keyPath:"adsid"});
  40. adsageIDB.getAllTodoItems();
  41. };
  42. }
  43. else{
  44. adsageIDB.getAllTodoItems();
  45. }
  46. };
  48. request.onerror=adsageIDB.onerror;
  49. }
  51. adsageIDB.addTodo=function(todoText){
  52. vardb=adsageIDB.db;
  53. vartrans=db.transaction(["todo"],IDBTransaction.READ_WRITE);
  54. varstore=trans.objectStore("todo");
  56. vardata={
  57. "text":todoText,
  58. "adsid":newDate().getTime()
  59. };
  61. varrequest=store.put(data);
  63. request.onsuccess=function(e){
  64. adsageIDB.getAllTodoItems();
  65. };
  67. request.onerror=function(e){
  68. console.log("ErrorAdding:",e);
  69. };
  70. };
  72. adsageIDB.deleteTodo=function(id){
  73. vardb=adsageIDB.db;
  74. vartrans=db.transaction(["todo"],IDBTransaction.READ_WRITE);
  75. varstore=trans.objectStore("todo");
  77. varrequest=store.delete(id);
  79. request.onsuccess=function(e){
  80. adsageIDB.getAllTodoItems();
  81. };
  83. request.onerror=function(e){
  84. console.log("ErrorAdding:",e);
  85. };
  86. };
  88. adsageIDB.getAllTodoItems=function(){
  89. vartodos=document.getElementById("todoItems");
  90. todos.innerHTML="";
  92. vardb=adsageIDB.db;
  93. vartrans=db.transaction(["todo"],IDBTransaction.READ_WRITE);
  94. varstore=trans.objectStore("todo");
  96. varkeyRange=IDBKeyRange.lowerBound(0);
  97. varcursorRequest=store.openCursor(keyRange);
  99. cursorRequest.onsuccess=function(e){
  100. varresult=e.target.result;
  101. if(!!result==false)
  102. return;
  104. renderTodo(result.value);
  105. result.continue();
  106. };
  108. cursorRequest.onerror=adsageIDB.onerror;
  109. };
  111. functionrenderTodo(row){
  112. vartodos=document.getElementById("todoItems");
  113. varli=document.createElement("li");
  114. vara=document.createElement("a");
  115. vart=document.createTextNode(row.text);
  117. a.addEventListener("click",function(){
  118. adsageIDB.deleteTodo(row.adsid);
  119. },false);
  121. a.textContent="[删除]";
  122. li.appendChild(t);
  123. li.appendChild(a);
  124. todos.appendChild(li)
  125. }
  127. functionaddTodo(){
  128. vartodo=document.getElementById("todo");
  129. adsageIDB.addTodo(todo.value);
  130. todo.value="";
  131. }
  133. functioninit(){
  134. adsageIDB.open();
  135. }
  137. window.addEventListener("DOMContentLoaded",init,false);
  138. </script>
  139. </head>
  140. <body>
  141. <ulid="todoItems"></ul>
  142. <inputtype="text"id="todo"name="todo"placeholder="adsageIDBtext?"/>
  143. <inputtype="submit"value="增加一个IDB"onclick="addTodo();returnfalse;"/>
  144. </body>
  145. </html>

以上这篇html5 初试 indexedDB(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

原文地址：http://www.cnblogs.com/androidshouce/archive/2016/07/21/5690444.html

您可能有感兴趣的文章
HTML5中indexedDB 数据库的如何使用实例
HTML5本地存储之IndexedDB
深入解析HTML5的IndexedDB索引数据库
5个HTML5的常用本地存储方式详解与介绍