双恒 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的详细内容，更多请关注双恒网络其它相关文章！
