IndexedDB开发总结

web 存储数据可以用 localStorage,sessionStorage或是 cookie,但都不能像原生的存储一样建立表单数据库来存储,而且存储的空间也不大,网上找了 indexedDB 尝试,发现挺好用的,类似于fmdb 一样的.

一. indexedDB 的对象和方法
数据库:IDBDatabase 对象,整个存储的容器
对象仓库：IDBObjectStore 对象,类似于表单
索引： IDBIndex 对象
事务： IDBTransaction 对象,数据的增删改查都通过事务操作
操作请求：IDBRequest 对象

二. indexedDB 的操作流程
在使用indexedDB之前先判断浏览器是否支持使用IndexedDB

var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
if(!indexedDB){
	console.log("你的浏览器不支持IndexedDB");
}

1. 打开数据库:indexedDB.open();

   var request = window.indexedDB.open(databaseName, version);
   //databaseName:数据库名称;
   //version:版本号,如果是新建数据库,默认为 1;如果省略，打开已有数据库时，默认为当前版本
   

   方法返回的是一个操作请求对象,对象包含三个处理事件表示操作结果:

   //数据库打开失败
   request.onerror = function (event) {
   	  			console.log('数据库打开报错'); 			
   };
   //数据库打开成功
   request.onsuccess = function (event) {
     			db = event.target.result;	  			
     			console.log('数据库打开成功');	 
   };
   //如果指定的版本号，大于数据库的实际版本号，就会发生数据库升级事件;
   //或者是数据库不存在则在该方法中会新建数据库
   request.onupgradeneeded = function(event) {
   			console.log('数据库开始建表');
   			db = event.target.result;				
   			if (!db.objectStoreNames.contains('detectList')) {//判断是否存在该表单,不存在则新建表单
   				objectStore = db.createObjectStore('detectList',{keyPath: "detectNo"});//新增 detectList 表单,指定 detectNo为索引属性
   				objectStore.createIndex('detectNo', 'detectNo', { unique: false });//新建索引
   	   			objectStore.createIndex('jsonDict', 'jsonDict', { unique: false });
   	   			//类似于创建表单的键,说明对象键的数据属性,unique表示该属性是否包含重复的值
   			}
   			
   }
   

2. 新增数据:通过对象仓库对数据进行增删改查的操作

   	//存数据,tableName表示表单名称,dict 插入的数据,callback 回调
    function addObjectModel (tableName,dict,callback){
    	 var transactions = db.transaction([tableName], 'readwrite');
    		 var objStore = transactions.objectStore(tableName);    		 
    		 var req = objStore.add(dict);    		 
    	  req.onsuccess = function (event) {
    	    console.log('数据写入成功');
    	    callback('true');
    	  };		
    	  req.onerror = function (event) {
    	    console.log('数据写入失败');
    	    callback('false');
    	  }
    };
   

3. 删除数据

      //删除数据
    function removeObject(tableName,params,callback) {
    	console.log(params);
    	var transaction = db.transaction(tableName, 'readwrite');
    		var store = transaction.objectStore(tableName);
    	var req = store.delete(params);
      req.onsuccess = function (event) {
        console.log('数据删除成功');
        callback('true');
      };
      req.onerror = function(event){
      	console.log('数据删除失败'); 
        callback('false');
      };
      
    }
   

4. 修改数据

    //修改数据
    function updateObject(tableName,dict,callback) {
      var request = db.transaction([tableName], 'readwrite')
        .objectStore(tableName)
        .put(dict);
    
      request.onsuccess = function (event) {
        console.log('数据修改成功');
        callback('true');
      };
    
      request.onerror = function (event) {
        console.log('数据修改失败');
        callback('false');
      }
    };
   

5. 查询数据

    //读数据
   function readObjectModel(tableName,params,callback) {
       var transaction = db.transaction([tableName]);
       var objectStore = transaction.objectStore(tableName);
       var req = objectStore.get(params);
    
       req.onerror = function(event) {
         console.log('事务失败');
       };
    
       req.onsuccess = function( event) {
          if (req.result) {	      
           callback(req.result);//获取到数据之后通过回调返回数据
          } else {
            console.log('未获得数据记录');
          }
       };
   };
   
   //读取所有数据
    function readAll(tableName,callback) {
      	var objectStore = db.transaction(tableName).objectStore(tableName);
    
       objectStore.openCursor().onsuccess = function (event) {
    	     var cursor = event.target.result;	     
    	     if (cursor) {		   
    	       cursor.continue();
    	       callback(cursor.value);
    	    } else {	     	
    	      console.log('没有更多数据了！');
    	      callback('false');
    	    }
        };
    };
   

6. 上面的数据库操作方法都是做了封装,在多个表单时方便操作,只需要传入相应表单名称和参数,就可以通过各个方法的回调得到自己想要的数据;在打开数据库建表成功时,可以看到数据储存模块会有 indexedDB的表单,然后可以在各个表单里存储自己的数据.