介绍 var indexedDB=窗口。indexedDB | |窗口。webkitIndexedDB | | window.mozIndexedDB;
如果(& # 39;webkitIndexedDB& # 39;在窗口){
窗口。IDBTransaction=window.webkitIDBTransaction;
窗口。IDBKeyRange=window.webkitIDBKeyRange;
}//这个就不解释了
var=indexedDB.open请求(“adsageIDB");//打开:indexedDB只有这一个方法打开(数据库名)
请求。调用onsuccess=function (e){//异步
var v=?.00”;
var db=e.target.result;
如果(v !=db.version) {
var setVrequest=db.setVersion (v);
setVrequest。调用onsuccess=function (e){//异步
如果(db.objectStoreNames.contains (“todo")) {
db.deleteObjectStore (“todo");
}
var=db.createObjectStore存储(“todo" {keyPath:“adsid"});//onsuccess后创建ObjectStore暂时用到两个参数,数据库,和主键
}
}
} //插入数据暂时只插入一列
var trans=db.transaction (“todo", IDBTransaction.READ_WRITE);//创建事务
var=trans.objectStore存储(“todo");//创建店//要操作数据必须建立事务和存储
var=https://www.yisu.com/zixun/{数据
“文本”:todoText,
“adsid”:新的日期().getTime ()
},//一个小数据adsid是主键
var=store.put请求(数据);//扒啃小安迦?
请求。调用onsuccess=function (e) {//成功后执行一些操作
};
请求。onerror=function (e) {
控制台。日志(“错误并补充道:“,e);
};//读取数据
var trans=db。事务((“备忘录”),IDBTransaction.READ_WRITE);
var=trans.objectStore存储(“备忘录”);
var keyRange=IDBKeyRange.lowerBound (0);
var cursorRequest=store.openCursor (keyRange);//这里用到指针游标,openCursor的参数keyRange是遍历范围还可以添加遍历方向参数//另一种方法是获得()这个就比较简单了直接store.get(“键值”)就行
cursorRequest。调用onsuccess=function (e) {
结果var=e.target.result;
如果(! !结果==false)
返回;
console.log (result.value);
result.continue ();//循环读取所有数据
};//删除数据
…
store.delete('键值”)
…
<>头
<>脚本
var indexedDB=窗口。indexedDB | |窗口。webkitIndexedDB | |
window.mozIndexedDB;
如果(“webkitIndexedDB”窗口){
windowwindow。IDBTransaction=window.webkitIDBTransaction;
windowwindow。IDBKeyRange=window.webkitIDBKeyRange;
}
adsageIDB={};
adsageIDB。db=零;
adsageIDB。onerror=function (e) {
console.log (e);
};
adsageIDB。打开=function () {
var=indexedDB.open请求(“adsageIDB”);
请求。调用onsuccess=function (e) {
var v=" 1.00 ";
adsageIDB。db=e.target.result;
var db=adsageIDB.db;
如果(v !=db.version) {
var setVrequest=db.setVersion (v);
setVrequest。onerror=adsageIDB.onerror;
setVrequest。调用onsuccess=function (e) {
如果(db.objectStoreNames.contains(“备忘录”)){
db.deleteObjectStore(“备忘录”);
}
var=db.createObjectStore(存储“待办事项”,
{keyPath: " adsid "});
adsageIDB.getAllTodoItems ();
};
}
其他{
adsageIDB.getAllTodoItems ();
}
};
请求。onerror=adsageIDB.onerror;
}
adsageIDB。addTodo=函数(todoText) {
var db=adsageIDB.db;
var trans=db。事务((“备忘录”),IDBTransaction.READ_WRITE);
var=trans.objectStore存储(“备忘录”);
var data={
“文本”:todoText,
“adsid”:新的日期().getTime ()
};
var=store.put请求(数据);
请求。调用onsuccess=function (e) {
adsageIDB.getAllTodoItems ();
};
请求。onerror=function (e) {
控制台。日志(“错误并补充道:“,e);
};
};
adsageIDB.deleteTodo=function (id) {
var db=adsageIDB.db;
var trans=db。事务((“备忘录”),IDBTransaction.READ_WRITE);
var=trans.objectStore存储(“备忘录”);
var=store.delete请求(id);
请求。调用onsuccess=function (e) {
adsageIDB.getAllTodoItems ();
};
请求。onerror=function (e) {
控制台。日志(“错误并补充道:“,e);
};
};
adsageIDB。getAllTodoItems=function () {
var todos=. getelementbyid(“待办事项”);
待办事项。innerHTML=" ";
var db=adsageIDB.db;
var trans=db。事务((“备忘录”),IDBTransaction.READ_WRITE);
var=trans.objectStore存储(“备忘录”);
var keyRange=IDBKeyRange.lowerBound (0);
var cursorRequest=store.openCursor (keyRange);
cursorRequest。调用onsuccess=function (e) {
结果var=e.target.result;
如果(! !结果==false)
返回;
renderTodo (result.value);
result.continue ();
};
cursorRequest。onerror=adsageIDB.onerror;
};
函数renderTodo(行){
var todos=. getelementbyid(“待办事项”);
李var=document.createElement(“李”);
var=document.createElement (“a”);
var t=document.createTextNode (row.text);
一个。addEventListener(“点击”,函数(){
adsageIDB.deleteTodo (row.adsid);
},假);
一个。textContent=吧境齗”;
li.appendChild (t);
li.appendChild(一个);
todos.appendChild(李)
}
函数addTodo () {
var todo=. getelementbyid(“备忘录”);
adsageIDB.addTodo (todo.value);
待办事项。值=" ";
}
init()函数{
adsageIDB.open ();
}
窗口。addEventListener (“DOMContentLoaded”内,init,假);>
小编给大家分享一下html5操作indexedDB的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
indexedDB是存储大量结构化数据的API,演示中用到的是异步API,麻烦的就是所有对indexedDB的操作都会发生一个异步的“请求”,只要熟悉了API操作起来也很简单。
大体流程是这样
1。打开数据库
这样就创建/连接了一个数据库
2。创建交互对象,,监听dom事件,,处理数据
然后就是要操作数据库了
