html5怎样操作indexedDB

互联网 18-1-10

这次给大家带来html5怎样操作indexedDB，html5操作indexedDB的注意事项有哪些，下面就是实战案例，一起来看一下。

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

大体流程是这样

1.打开数据库

var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;         if ('webkitIndexedDB' in window) {         window.IDBTransaction = window.webkitIDBTransaction;         window.IDBKeyRange = window.webkitIDBKeyRange;     }     //这个就不解释了         var request = indexedDB.open("adsageIDB");  //open  ： indexedDB只有这一个方法  打开（数据库名）     request.onsuccess = function(e) { //异步         var v = "1.00";         var db = e.target.result;             if (v!= db.version) {             var setVrequest = db.setVersion(v);             setVrequest.onsuccess = function(e) { //异步                 if(db.objectStoreNames.contains("todo")) {                     db.deleteObjectStore("todo");                 }                 var store = db.createObjectStore("todo", {keyPath: "adsid"});//onsuccess 后创建ObjectStore  暂时用到两个参数，数据库&&主键             }         }         }

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

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

然后就是要操作数据库了

//插入数据 暂时只插入一列      var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);//创建transaction      var store = trans.objectStore("todo");//创建Store     //要操作数据必须建立transaction 和 Store         var data = {         "text": todoText,         "adsid": new Date().getTime()     };//一个小数据 adsid是主键         var request = store.put(data); //‘强行’插入         request.onsuccess = function(e) {         //成功后执行一些操作     };         request.onerror = function(e) {         console.log("Error Adding: ", e);     };    //读取数据     var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);     var store = trans.objectStore("todo");         var keyRange = IDBKeyRange.lowerBound(0);     var cursorRequest = store.openCursor(keyRange);     //这里用到指针cursor ,openCursor的参数 keyRange是遍历范围 还可以添加遍历方向参数     //另一种方法是get() 这个就比较简单了直接store.get('键值')就行         cursorRequest.onsuccess = function(e) {         var result = e.target.result;         if(!!result == false)         return;             console.log(result.value);         result.continue(); //循环读取所有数据     };    //删除数据     ...     store.delete('键值')     ...    <!DOCTYPE html>    <html>      <head>        <script>          var indexedDB = window.indexedDB || window.webkitIndexedDB ||                           window.mozIndexedDB;                      if ('webkitIndexedDB' in window) {             windowwindow.IDBTransaction = window.webkitIDBTransaction;             windowwindow.IDBKeyRange = window.webkitIDBKeyRange;           }                      adsageIDB = {};           adsageIDB.db = null;                      adsageIDB.onerror = function(e) {             console.log(e);           };                      adsageIDB.open = function() {             var request = indexedDB.open("adsageIDB");                        request.onsuccess = function(e) {               var v = "1.00";               adsageIDB.db = e.target.result;               var db = adsageIDB.db;                   if (v!= db.version) {                 var setVrequest = db.setVersion(v);                            setVrequest.onerror = adsageIDB.onerror;                 setVrequest.onsuccess = function(e) {                   if(db.objectStoreNames.contains("todo")) {                     db.deleteObjectStore("todo");                   }                              var store = db.createObjectStore("todo",                     {keyPath: "adsid"});                              adsageIDB.getAllTodoItems();                 };               }               else {                 adsageIDB.getAllTodoItems();               }             };                        request.onerror = adsageIDB.onerror;           }                      adsageIDB.addTodo = function(todoText) {             var db = adsageIDB.db;             var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);             var store = trans.objectStore("todo");                        var data = {               "text": todoText,               "adsid": new Date().getTime()             };                        var request = store.put(data);                        request.onsuccess = function(e) {               adsageIDB.getAllTodoItems();             };                        request.onerror = function(e) {               console.log("Error Adding: ", e);             };           };                      adsageIDB.deleteTodo = function(id) {             var db = adsageIDB.db;             var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);             var store = trans.objectStore("todo");                        var request = store.delete(id);                        request.onsuccess = function(e) {               adsageIDB.getAllTodoItems();             };                        request.onerror = function(e) {               console.log("Error Adding: ", e);             };           };                      adsageIDB.getAllTodoItems = function() {             var todos = document.getElementById("todoItems");             todos.innerHTML = "";                        var db = adsageIDB.db;             var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);             var store = trans.objectStore("todo");                        var keyRange = IDBKeyRange.lowerBound(0);             var cursorRequest = store.openCursor(keyRange);                        cursorRequest.onsuccess = function(e) {               var result = e.target.result;               if(!!result == false)                 return;                          renderTodo(result.value);               result.continue();             };                        cursorRequest.onerror = adsageIDB.onerror;           };                      function renderTodo(row) {             var todos = document.getElementById("todoItems");             var li = document.createElement("li");             var a = document.createElement("a");             var t = document.createTextNode(row.text);                        a.addEventListener("click", function() {               adsageIDB.deleteTodo(row.adsid);             }, false);                        a.textContent = " [删除]";             li.appendChild(t);             li.appendChild(a);             todos.appendChild(li)           }                      function addTodo() {             var todo = document.getElementById("todo");             adsageIDB.addTodo(todo.value);             todo.value = "";           }                      function init() {             adsageIDB.open();           }                      window.addEventListener("DOMContentLoaded", init, false);         </script>      </head>      <body>        <ul id="todoItems"></ul>        <input type="text" id="todo" name="todo" placeholder="adsageIDB text?" />        <input type="submit" value="增加一个 IDB" onclick="addTodo(); return false;"/>      </body>    </html>

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

html5怎样操作indexedDB

相关资讯

标签推荐