html5怎样操作indexedDB

来源：动视网责编：小采时间：2020-11-27 15:06:36

html5怎样操作indexedDB

html5怎样操作indexedDB:这次给大家带来html5怎样操作indexedDB，html5操作indexedDB的注意事项有哪些，下面就是实战案例，一起来看一下。indexedDB是存储大量结构化数据的API，demo中用到的是异步API，麻烦的就是所有对indexedDB的操作都会发生一个异步的请求，只要熟悉了A

推荐度：

点击下载本文 文档为doc格式

导读html5怎样操作indexedDB:这次给大家带来html5怎样操作indexedDB，html5操作indexedDB的注意事项有哪些，下面就是实战案例，一起来看一下。indexedDB是存储大量结构化数据的API，demo中用到的是异步API，麻烦的就是所有对indexedDB的操作都会发生一个异步的请求，只要熟悉了A

这次给大家带来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>

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

html5怎样操作indexedDB

推荐度：

点击下载本文 文档为doc格式

标签：操作使用怎样操作

热门焦点

html5怎样操作indexedDB

html5怎样操作indexedDB

html5怎样操作indexedDB

最新推荐

猜你喜欢

热门推荐