html5操作indexedDB的方法-创新互联

小编给大家分享一下html5操作indexedDB的方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联-专业网站定制、快速模板网站建设、高性价比温县网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式温县网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖温县地区。费用合理售后完善，10年实体公司更值得信赖。

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://scyanting.com/article/cosijg.html

html5操作indexedDB的方法-创新互联

其他资讯