HTML5-indexedDB

最近在做一个功能,需要将用户上传的文件暂时存下来,等到后期再上传,但是sessionStorage等里面只能存字符串,file对象存不了,用window接收的话,页面刷新之后文件就没了,所以就想到了indexedDB
  • 在浏览器中使用indexedDB数据库的时候,首先需要对indexedDB数据库,该数据库所使用的事务,IDBKeyRange对象与游标对象进行定义
//indexedDB数据库对象
window.indexedDB=window.indexedDB||window.webkitIndexedDB||window.mozIndexedDB||window.msIndexedDB
//事务对象
window.IDBTransaction=window.IDBTransaction||window.webkitIDBTransaction||window.mozIDBTransaction||window.msIDBTransaction
//IDBKeyRange对象
window.IDBKeyRange=window.IDBKeyRange||window.webkitIDBKeyRange||window.mozIDBKeyRange||window.msIDBKeyRange
//游标对象
window.IDBCursor=window.IDBCursor||window.webkitIDBCursor||window.mozIDBCursor||window.msIDBCursor
  • 定义数据库名,版本号,连接数据库
//数据库名
var dbName='indexedDBTest';
//版本号
var dbVersion=20150420;
//数据库对象的open方法返回一个IDBOpenDBRequest对象,代表一个请求连接数据库的请求对象
var dbConnect=indexedDB.open(dbName,dbVersion);
  • 监听IDBOpenDBRequest对象的onsuccess事件和onerror事件来定义事件处理函数
dbConnect.onsuccess=function(e){
       //得到连接成功的IDBDatabase数据库对象
       idb=e.target.result;
       console.log('连接数据库成功');
       var tx=idb.transactioon(['Users'],'readonly');
       var store=tx.objectStore('Users');
       var req=store.count();
       req.onsuccess=function(){
          console.log('有'+this.result+'条记录');
       }
}
dbConnect.onerror = function(e){
    alert('数据库连接失败');
  };
  • 对于创建对象仓库和索引的操作,只能在版本更新事务内部进行(因为indexedDB中不允许数据库中的数据仓库在同一个版本中发生变化)
    当指定版本号大于当前版本号时自动触发版本更新事件,在indexedDB数据库中只能针对被设为索引的属性值进行检索,不能针对没有被设为索引的属性值进行检索,在indexedDB数据库中,不能创建同名的对象仓库。
dbConnect.onupgradeneeded=function(e){
                //IDBDatabase
              idb=e.target.result;
                 //版本更新事务
              var tx=e.target.transaction;
                 //仓库名
              var name='Users2';
                 //仓库的参数对象   KeyPath相当于主键   autoIncrement(自动增加主键值) 
              var optionalParameters={
                   keyPath:'userId',
                   autoIncrement:false
              }
                 //对象仓库  使用IDBDatabase的createObjectStore方法创建对象仓库
              var store=idb.createObjectStore(name,optionalParameters);
              alert('对象仓库创建成功');
                 //索引名
              var indexName='userNameAddressIndex';
                 //索引字段可以为多个,组合索引,检索的时候也要同时写上多个
              var keyPath=['userName','Address'];
                 //索引参数对象
              var indexOptionalParameters={
                    unique:false,
                    multiEntry:false
               }
                //索引对象   因为索引的作用在对象仓库上的,所以使用对象仓库的createIndex方法创建索引
                //相当于数据库中的创建数据表,然后为该表创建索引
              var idx=store.createIndex(indexName,keyPath,indexOptionalParameters);
              alert('索引创建成功');  
}
  • 使用事务,保存数据,为了保存数据,首先要连接某个indexedDB数据库,并且在连接成功后使用该数据库对象的transaction方法开启 一个读写事务。
dbConnect.onsuccess=function(e){
                 //得到连接成功的IDBDatabase数据库对象
                 idb=e.target.result;
                 console.log('数据库连接成功');
                   //开启事务,规定作用于哪几个对象仓库,模式是什么
                 var tx=idb.transaction(['Users'],'readwrite');
                 tx.oncomplete=function(){
                        //事务完成时触发,事务所在的函数结束,即事务完成
                   } 
                 tx.onabort=function(){
                        //事务中止时触发
                    }
                    //获得事务作用范围中的某个对象仓库
                  var store=tx.objectStore('Users');
                  var value={
                      userId:1,
                      userName:'张三',
                      address:'住址1'
                    }
                   //使用对象仓库的put方法插入数据,返回的是IDBRequest对象,代表一个向仓库发出的请求
                    //类似的add方法,若该主键值在对象仓库中已存在,则保存失败,使用put则会更新对象仓库的该条数据
                  var req=store.put(value);
                  req.onsuccess=function(){}
                  req.onerror=function(){}
}
  • 读取数据
dbConnect.onsuccess=function(e){
                 idb=e.target.result;
                 console.log('数据库连接成功');
                   //开启事务,规定作用于哪几个对象仓库,模式是什么
                 var tx=idb.transaction(['Users'],'readwrite');
                //与上例代码一样,事务改成只读的readonly
                //根据主键值get到数据,返回的是IDBRequest对象
                var store=tx.objectStore('Users');
                var req = sotre.get(1);
                req.onsuccess=function(){
                 if(this.result==undefined){
                    //
                    } else{
                       //data即为当初保存的js对象
                       var data=this.result;
                     }
                }
                 req.onerror=function(){}  
}
//可以使用对象仓库的get方法获取,也可以根据索引名获取该对象仓库的索引,然后使用索引对象的get方法从对象仓库中获取数据
//如  var idx=store.index('userNameIndex');       
 //userNameIndex为索引名
 var req=idx.get('张三') 
 //返回的同样是IDBRequest对象,参数为设为索引的字段
  • 使用对象仓库或者索引的get方法,只能获取到一条数据,若想获取一批数据,则要使用游标对象window.IDBKeyRange
funciton findData(){
                 var tx=idb.transactioon(['Users'],'readonly');
                 var store=tx.objectStore('Users');
                 
                 var idx=store.index('userNameIndex');
                  //通过游标检索主键值在1到4之间的数据
                 var range=IDBKeyRange.bound('1','4');
                  //按主键值升值排列
                 var direction='next';
                  //通过对象仓库打开一个游标,也可以使用索引打开游标
                 // var req=idx.openCursor(range,direction),此时range的参数为索引的字段
                 var req=store.openCursor(range,direction);
                 req.onsuccess=function(){
                     var cursor=this.result;
                     if(cursor){
                            //this.result.value为一条数据
                        alert('检索到一条数据用户名为:'+cursor.value.Name);
                        cursor.continue();
                      }else{
                         alert('检索结束'); 
                      }
                  }
                  req.onerror=function(){alert('检索数据失败');}
}
  • 删除数据库
indexedDB.deleteDatabase(name);

你可能感兴趣的:(HTML5-indexedDB)