html5怎样操作indexedDB
导读：收集整理的这篇文章主要介绍了html5怎样操作indexedDB，觉得挺不错的，现在分享给大家，也给大家做个参考。这次给大家带来htML5怎样操作indexedDB，html5操作indexedDB的注意事项有哪些，下面就是实战案例，一起来...
收集整理的这篇文章主要介绍了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('键值') ... !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>
相信看了这些案例你已经掌握了方法，更多精彩请关注其它相关文章！
相关阅读：
12个冷门的H5设计小技巧
H5的通用接口详细介绍
H5怎样用绘制五角星
以上就是html5怎样操作indexedDB的详细内容，更多请关注其它相关文章！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： html5怎样操作indexedDB
本文地址： https://pptw.com/jishu/583744.html