html5 初试 indexedDB(推荐)

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

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

大体流程是这样

1.打开数据库

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

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

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

然后就是要操作数据库了

JavaScript Code复制内容到剪贴板
  1. //插入数据暂时只插入一列
  2. vartrans=db.transaction(["todo"],IDBTransaction.READ_WRITE);//创建transaction
  3. varstore=trans.objectStore("todo");//创建Store
  4. //要操作数据必须建立transaction和Store
  5. vardata={
  6. "text":todoText,
  7. "adsid":newDate().getTime()
  8. };//一个小数据adsid是主键
  9. varrequest=store.put(data);//‘强行’插入
  10. request.onsuccess=function(e){
  11. //成功后执行一些操作
  12. };
  13. request.onerror=function(e){
  14. console.log("ErrorAdding:",e);
  15. };
JavaScript Code复制内容到剪贴板
  1. //读取数据
  2. vartrans=db.transaction(["todo"],IDBTransaction.READ_WRITE);
  3. varstore=trans.objectStore("todo");
  4. varkeyRange=IDBKeyRange.lowerBound(0);
  5. varcursorRequest=store.openCursor(keyRange);
  6. //这里用到指针cursor,openCursor的参数keyRange是遍历范围还可以添加遍历方向参数
  7. //另一种方法是get()这个就比较简单了直接store.get('键值')就行
  8. cursorRequest.onsuccess=function(e){
  9. varresult=e.target.result;
  10. if(!!result==false)
  11. return;
  12. console.log(result.value);
  13. result.continue();//循环读取所有数据
  14. };
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;
  7. if('webkitIndexedDB'inwindow){
  8. windowwindow.IDBTransaction=window.webkitIDBTransaction;
  9. windowwindow.IDBKeyRange=window.webkitIDBKeyRange;
  10. }
  11. adsageIDB={};
  12. adsageIDB.db=null;
  13. adsageIDB.onerror=function(e){
  14. console.log(e);
  15. };
  16. adsageIDB.open=function(){
  17. varrequest=indexedDB.open("adsageIDB");
  18. request.onsuccess=function(e){
  19. varv="1.00";
  20. adsageIDB.db=e.target.result;
  21. vardb=adsageIDB.db;
  22. if(v!=db.version){
  23. varsetVrequest=db.setVersion(v);
  24. setVrequest.onerror=adsageIDB.onerror;
  25. setVrequest.onsuccess=function(e){
  26. if(db.objectStoreNames.contains("todo")){
  27. db.deleteObjectStore("todo");
  28. }
  29. varstore=db.createObjectStore("todo",
  30. {keyPath:"adsid"});
  31. adsageIDB.getAllTodoItems();
  32. };
  33. }
  34. else{
  35. adsageIDB.getAllTodoItems();
  36. }
  37. };
  38. request.onerror=adsageIDB.onerror;
  39. }
  40. adsageIDB.addTodo=function(todoText){
  41. vardb=adsageIDB.db;
  42. vartrans=db.transaction(["todo"],IDBTransaction.READ_WRITE);
  43. varstore=trans.objectStore("todo");
  44. vardata={
  45. "text":todoText,
  46. "adsid":newDate().getTime()
  47. };
  48. varrequest=store.put(data);
  49. request.onsuccess=function(e){
  50. adsageIDB.getAllTodoItems();
  51. };
  52. request.onerror=function(e){
  53. console.log("ErrorAdding:",e);
  54. };
  55. };
  56. adsageIDB.deleteTodo=function(id){
  57. vardb=adsageIDB.db;
  58. vartrans=db.transaction(["todo"],IDBTransaction.READ_WRITE);
  59. varstore=trans.objectStore("todo");
  60. varrequest=store.delete(id);
  61. request.onsuccess=function(e){
  62. adsageIDB.getAllTodoItems();
  63. };
  64. request.onerror=function(e){
  65. console.log("ErrorAdding:",e);
  66. };
  67. };
  68. adsageIDB.getAllTodoItems=function(){
  69. vartodos=document.getElementById("todoItems");
  70. todos.innerHTML="";
  71. vardb=adsageIDB.db;
  72. vartrans=db.transaction(["todo"],IDBTransaction.READ_WRITE);
  73. varstore=trans.objectStore("todo");
  74. varkeyRange=IDBKeyRange.lowerBound(0);
  75. varcursorRequest=store.openCursor(keyRange);
  76. cursorRequest.onsuccess=function(e){
  77. varresult=e.target.result;
  78. if(!!result==false)
  79. return;
  80. renderTodo(result.value);
  81. result.continue();
  82. };
  83. cursorRequest.onerror=adsageIDB.onerror;
  84. };
  85. functionrenderTodo(row){
  86. vartodos=document.getElementById("todoItems");
  87. varli=document.createElement("li");
  88. vara=document.createElement("a");
  89. vart=document.createTextNode(row.text);
  90. a.addEventListener("click",function(){
  91. adsageIDB.deleteTodo(row.adsid);
  92. },false);
  93. a.textContent="[删除]";
  94. li.appendChild(t);
  95. li.appendChild(a);
  96. todos.appendChild(li)
  97. }
  98. functionaddTodo(){
  99. vartodo=document.getElementById("todo");
  100. adsageIDB.addTodo(todo.value);
  101. todo.value="";
  102. }
  103. functioninit(){
  104. adsageIDB.open();
  105. }
  106. window.addEventListener("DOMContentLoaded",init,false);
  107. </script>
  108. </head>
  109. <body>
  110. <ulid="todoItems"></ul>
  111. <inputtype="text"id="todo"name="todo"placeholder="adsageIDBtext?"/>
  112. <inputtype="submit"value="增加一个IDB"onclick="addTodo();returnfalse;"/>
  113. </body>
  114. </html>

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

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

标签: indexedDB