搜索
优就业WEB教程-Web数据持久化存储IndexedDBIndexedDB是在浏览器中保存结构化数据的一种数据库，为了替换WebSQL(标准已废弃，但被广泛支持)而出现。IndexedDB使用NoSQL的形式来操作数据库，保存和读取是JavaScript对象，同时还支持查询及搜索。下面由5个方面讲述：1.数据库初始化2.对象存储空间(ObjectStore)3.事务4.游标查询5.索引数据库初始化IndexedDB保存的是对象，而不是使用表保存数据。打开数据库使用indexDB.open方法，这方法有两个参数，第一个是数据库名称，第二个是数据版本号。PS：IndexedDB的操作完全是异步进行的，每一次IndexedDB操作，都需要注册onerror或onsuccess事件处理程序。varDB_NAME='DEMO';varDB_VERSION=2;//使用正整数，别用浮点型vardb;functioninitDb(){console.debug(initDb...);varreq=indexedDB.open(DB_NAME,DB_VERSION);req.onsuccess=function(evt){db=evt.target.result;console.debug(initDbopened);};req.onerror=function(evt){console.error(initDberror:,evt.target.errorCode||evt.target.error);};//增加数据库版本号时,会触发onupgradeneeded事件(会在onsuccess之前被调用)req.onupgradeneeded=function(evt){console.debug(initDb.onupgradeneeded);};}PS：这里要注意的是，数据库版本只会有最新一个，不会同时存在两个版本的同名数据库。对象存储空间(ObjectStore)对象存储空间(ObjectStore)可以想象成关系数据库的表，在初始化DB触发onupgradeneeded时，创建ObjectStore。使用createObjectStore方法，第一个参数是对象名，第二个参数是对象属性，一般是设置keyPath(作为键使用)。req.onupgradeneeded=function(evt){console.debug(initDb.onupgradeneeded);vardb=evt.currentTarget.result;//ObjectStore必须在onupgradeneeded里创建，其他地方将会创建失败varusersStore=db.createObjectStore(users,{keyPath:id});};效果如下：事务所有读取或修改数据的操作，都要通过事务来完成。创建事务使用transaction方法，第一个参数是需要访问的ObjectStore，第二个参数是访问模式(readwrite、readonly，默认是只读)。添加数据functionaddData(){varusers=[{id:'001',name:'刘亦菲',age:18},{id:'002',name:'杨幂',age:19}];vartx=db.transaction(users,READ_WRITE);varstore=tx.objectStore(users);vari=0,len=users.length;while(ilen){store.add(users[i++]);}}获取数据functiongetData(){vartx=db.transaction(users);varstore=tx.objectStore(users);varreq=store.get(001);req.onsuccess=function(evt){varres=evt.target.result;console.debug(res);};req.onerror=function(evt){console.error(getDataerror:,evt.target.errorCode||evt.target.error);};}修改数据functionupdateData(){vartx=db.transaction(users,READ_WRITE);varstore=tx.objectStore(users);varreq=store.put({id:'001',name:'刘亦菲-小龙女',age:18});req.onsuccess=function(evt){console.debug(updateDatasuccess);};req.onerror=function(evt){console.error(updateDataerror:,evt.target.errorCode||evt.target.error);};}删除数据functiondelData(){vartx=db.transaction(users,READ_WRITE);varstore=tx.objectStore(users);varreq=store.delete(001);req.onsuccess=function(evt){console.debug(delDatasuccess);};req.onerror=function(evt){console.error(delDataerror:,evt.target.errorCode||evt.target.error);};}清空数据functionclearData(){vartx=db.transaction(users,READ_WRITE);varstore=tx.objectStore(users);varreq=store.clear();req.onsuccess=function(evt){console.debug(clearDatasuccess);};req.onerror=function(evt){console.error(clearDataerror:,evt.target.errorCode||evt.target.error);};}游标查询使用事务可以直接通过键检索单个对象，而需要检索多个对象时候就需要使用游标。游标是指向结果集的指针，不提前收集结果。游标指针会先指向结果中的第一项，在接到查找下一项指令时，才会指向下一项。functionopenCursor(){vartx=db.transaction(users,READ_WRITE);varstore=tx.objectStore(users);varreq=store.openCursor();req.onsuccess=function(evt){varcursor=evt.target.result;if(cursor){//必要检查varvalue=cursor.value;console.log(value);if(value.name=='杨幂'){value.age=16;cursor.update(value);//修改数据(必须是读写模式)}if(value.name=='柳岩'){cursor.delete();//删除当前项}cursor.continue();//移动到下一项}};req.onerror=function(evt){console.error(openCursorerror:,evt.target.errorCode||evt.target.error);};}这里有几点要注意：1.如果需要修改或删除数据，就需要打开成读写模式。2.cursor的非空校验是必要的。3.修改或删除的操作也是有onsuccess和onerror的，只是在示例中没有写出来。4.调用continue才会移动到下一项另外可以设置游标的键范围和游标的方向，即打开openCursor方法时可以传这两个参数(openCursor(键范围,方向))，第一个参数是object类型，第二个参数是字符串类型。游标键范围键范围由IDBKeyRange的实例表示。IDBKeyRange.only('001');//只想要键为001的结果IDBKeyRange.lowerBound('002');//从键为002开始，到最后IDBKeyRange.lowerBound('002',true);//从键为002开始，但忽略002，到最后IDBKeyRange.upperBound('002');//从头开始，到键为002为止IDBKeyRange.upperBound('002',true);//从头开始，到键为002为止，但忽略002IDBKeyRange.bound('001','005');//从001开始，到为005为止IDBKeyRange.bound('001','005',true,true);//从001开始，到为005为止，但忽略001、005游标方向next:从第一项到最后一项(默认)prev:从最后一项到第一项索引当需要使用其他属性(非主键)获取数据时，就要预先创建索引，然后使用索引获取数据。创建索引(在数据库初始化onupgradeneeded事件时)第一个参数是索引名字，第二个参数是索引的属性的名字，第三个是一个options对象。一般是指定unique，设置索引是否唯一。usersStore.createIndex(name,name,{unique:false});索引获取数据functionindexGetData(){vartx=db.transaction(users,READ_WRITE);varstore=tx.objectStore(users);varindex=store.index(name);varreq=index.get(杨幂)req.onsuccess=function(evt){console.debug(indexGetsuccess,evt.target.result);};req.onerror=function(evt){console.error(indexGeterror:,evt.ta