HTML + jQuery + indexDB将数据缓存到浏览器

主要适用于大量数据进行浏览器缓存，减少二次加载的时间，具体实现方法如下：

1.首先设置缓存，初始化

function setCache(){
	var request = indexedDB.open('userone',11);
	request.onerror = function(e){
	};
	request.onsuccess = function(e){
	var db = e.target.result;   
	//insertDate(db); //添加数据
	};
	request.onupgradeneeded = function(e){
		var db = e.target.result;                
		//在第一次创建数据库的时候，就创建userinfo相关的objectstore，以供后面添加数据时候使用
		 if(!db.objectStoreNames.contains('user')){                    
		 //keyPath:Javascript对象，对象必须有一属性作为键值
			 var objectStore = db.createObjectStore('user',{autoIncrement: true});
			 objectStore.createIndex('keyIndex','key',{unique:true});//这里假定名字不能重复，创建基于name的唯一索引
		 }
	};
} 

2.把数据添加到缓存里
data：要缓存的数据
key：相当于键值对名，以后查询的时候用key来进行查询

//添加数据
function insertDate(data,key){
	var da={
		key:key,
		data:data
	}
	var request = indexedDB.open('userone',11);
	request.onerror = function(e){
	};
	request.onsuccess = function(e){
			var db = e.target.result;   
			var tt = db.transaction(["user"],"readwrite"); 
			var st =  tt.objectStore("user"); 
			var request2 = st.add(da);  
			request2.onsuccess = function (event){
				// console.log('数据写入成功');
			};
			request2.onerror = function (event){ 
				// console.log('数据写入失败');
			}
	};
}

3.读取缓存数据

//读取数据
function readerDate(key){
	var request = indexedDB.open('userone',11); //打开数据库
	request.onerror = function(e){
	//错误的回到方法
	};
	request.onsuccess = function(e){ 
	var db = e.target.result;   
	var tt = db.transaction(["user"],"readonly"); 
	var st =  tt.objectStore("user"); 
	var cursor = st.openCursor();
	cursor.onsuccess = function(e) {
		db = request.result; //创建数据库成功时候，将结果给db，此时db就是当前数据库
		var transaction = db.transaction("user",'readwrite');            
		var objectStore = transaction.objectStore("user");            
		var nameIndex = objectStore.index("keyIndex"); //获得nameIndex索引
		    nameIndex.get(key).onsuccess = function(e) { //根据name索引获得数据成功的回调
			var data = e.target.result.data;			
		  };
		  nameIndex.get(key).onerr = function(e) { //根据name索引获得数据失败的回调

		  }
		}
	};
}

设置成功！