广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买
这次给大家带来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>登录后复制相信看了这些案例你已经掌握了方法，更多精彩请关注9543建站博客其它相关文章！
相关阅读：
12个冷门的H5设计小技巧
H5的通用接口详细介绍
H5怎样用绘制五角星
以上就是html5怎样操作indexedDB的详细内容，更多请关注9543建站博客其它相关文章！
发表评论