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);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345

推荐阅读更多精彩内容