189 8069 5689
小编给大家分享一下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('键值')
...
以上是html5操作indexedDB的方法的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！