html5 初试 indexedDB(推荐)

2019-01-28 14:20:38王振洲

indexedDB是存储大量结构化数据的API,demo中用到的是异步API,麻烦的就是所有对indexedDB的操作都会发生一个异步的‘请求’,只要熟悉了API操作起来也很简单。

大体流程是这样

1.打开数据库

JavaScript Code复制内容到剪贴板
  1. var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;      
  2. if ('webkitIndexedDB' in window) {        window.IDBTransaction = window.webkitIDBTransaction;   
  3.     window.IDBKeyRange = window.webkitIDBKeyRange;    }   
  4. //这个就不解释了      
  5. var request = indexedDB.open("adsageIDB");  //open  : indexedDB只有这一个方法  打开(数据库名)    request.onsuccess = function(e) { //异步   
  6.     var v = "1.00";        var db = e.target.result;   
  7.        if (v!= db.version) {   
  8.         var setVrequest = db.setVersion(v);            setVrequest.onsuccess = function(e) { //异步   
  9.             if(db.objectStoreNames.contains("todo")) {                    db.deleteObjectStore("todo");   
  10.             }                var store = db.createObjectStore("todo", {keyPath: "adsid"});//onsuccess 后创建ObjectStore  暂时用到两个参数,数据库&&主键   
  11.         }        }       
  12. }  

这样就 创建/连接 了一个数据库

2.创建交互对象 && 监听dom事件 && 处理数据

然后就是要操作数据库了

JavaScript Code复制内容到剪贴板
  1. //插入数据 暂时只插入一列     var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);//创建transaction