html5怎样操作indexedDB

这次给大家带来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('键值')   ...  nbsp;html>                    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);                     

登录后复制                  

相信看了这些案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！

相关阅读：

注意事项

注意事项

注意事项

以上就是html5怎样操作indexedDB的详细内容，更多请关注【创想鸟】其它相关文章！