怎样操作html5,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('键值')

...

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);

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

相关阅读：