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('键值') ...
以上是html5操作indexedDB的方法的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
网站名称:html5操作indexedDB的方法
标题网址:http://scyingshan.cn/article/pcodpe.html