IndexedDB 是一个基于 JavaScript 的面向对象的事务型数据库。有了LocalStorage和Cookies，为什么还要推出indexedDB呢？其实对于在浏览器里存储数据，可以使用cookies或LocalStorage，但它们都是比较简单的技术，而IndexedDB提供了类似数据库风格的数据存储和使用方式。
LocalStorage 与 IndexedDB 区别也适用场景
LocalStorage是用key-value键值模式存储数据，它存储的数据都是字符串形式。如果你想让LocalStorage存储对象，你需要借助JSON.stringify()能将对象变成字符串形式，再用JSON.parse()将字符串还原成对象,就是专门为小数量数据设计的，所以它的 api 设计为同步的。
IndexedDB很适合存储大量数据，它的 API 是异步调用的。IndexedDB使用索引存储数据，各种数据库操作放在事务中执行。IndexedDB甚至还支持简单的数据类型。IndexedDB比localstorage强大得多，但它的 API 也相对复杂。对于简单的数据，你应该继续使用localstorage，但当你希望存储大量数据时，IndexedDB会明显的更适合，IndexedDB能提供你更为复杂的查询数据的方式。
indexedDB 的特性
对象仓库
有了数据库后我们自然希望创建一个表用来存储数据，但 indexedDB 中没有表的概念，而是 objectStore，一个数据库中可以包含多个 objectStore，objectStore 是一个灵活的数据结构，可以存放多种类型数据。也就是说一个 objectStore 相当于一张表，里面存储的每条数据和一个键相关联。我们可以使用每条记录中的某个指定字段作为键值（keyPath），也可以使用自动生成的递增数字作为键值（keyGenerator），也可以不指定。选择键的类型不同，objectStore 可以存储的数据结构也有差异。
事务性
在 indexedDB 中，每一个对数据库操作是在一个事务的上下文中执行的。事务范围一次影响一个或多个 object stores，你通过传入一个 object store 名字的数组到创建事务范围的函数来定义。例如：db.transaction(storeName, 'readwrite')，创建事务的第二个参数是事务模式。当请求一个事务时,必须决定是按照只读还是读写模式请求访问。
基于请求
对 indexedDB 数据库的每次操作，描述为通过一个请求打开数据库,访问一个 object store，再继续。IndexedDB API 天生是基于请求的,这也是 API 异步本性指示。对于你在数据库执行的每次操作,你必须首先为这个操作创建一个请求。当请求完成,你可以响应由请求结果产生的事件和错误。
异步
在 IndexedDB 大部分操作并不是我们常用的调用方法，返回结果的模式，而是请求—响应的模式，所谓异步 API 是指并不是这条指令执行完毕，我们就可以使用 request.result 来获取 indexedDB 对象了，就像使用 ajax 一样，语句执行完并不代表已经获取到了对象，所以我们一般在其回调函数中处理。
几个概念
●IDBFactory：数据库工厂，负责打开或者创建数据库
●IDBFactory.open 方法发送一个打开或者创建一个数据库的请求
●IDBFactory.deleteDatabase 方法： 发送一个删除数据库的请求
●IDBDatabase: 数据库
●IDBDatabase.close 方法关闭数据库。
●IDBDatabase.createObjectStore 方法创建 store，相当于表
● IDBDatabase.transaction 开启一个事务。
● IDBIndex：数据库表的索引
● IDBObjectStore：数据库表
● IDBTransaction：事务
● IDBRequest：机会是所有 indexedDB 操作的返回值，indexedDB 操作请求
● IDBRequest.result 结果
● IDBRequest.onerror 异常事件
● IDBRequest.onsuccess 成功的事件
function IndexedDBDataBase(){
var myDB={
name:'TestDatabase',
version:1,
db:null,
ojstore:{
name:'user',//存储空间表的名字
keypath:'id'//主键
}
};
var userObject=null;
// 创建indexedDB对象，兼容各种浏览器
var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange;//键范围
if (!indexedDB) {
console.log("你的浏览器不支持IndexedDB");
}
this.getDataBaseObject= function(){
//获取数据库信息
return myDB;
}
this.getUserObject= function(){
//获取数据库信息
return userObject;
}
/* 建立或打开数据库，建立对象存储空间(ObjectStore)
* @param {string}echo3991Type 版本类型
* @param {obj}
* @param {bool}
* @param {bool}
*/
this.openDB = function (myDB,dbname,dbversion,callback){
var self = this;
var version = dbversion || 1;
var request = indexedDB.open(dbname,version);
request.onerror = function(e){
console.log(e.currentTarget.error.message);
};
request.onsuccess = function(e){
myDB.db = e.target.result;
console.log('成功建立并打开数据库:'+myDB.name+' version'+dbversion);
};
request.onupgradeneeded=function(e){
var db=e.target.result,transaction= e.target.transaction,store;
if(!db.objectStoreNames.contains(myDB.ojstore.name)){
//没有该对象空间时创建该对象空间
store = db.createObjectStore(myDB.ojstore.name,{keyPath:myDB.ojstore.keypath});
console.log('成功建立对象存储空间：'+myDB.ojstore.name);
}
}
},
/* 删除数据库
* @param {string}echo3991Type 版本类型
* @param {obj}
* @param {bool}
* @param {bool}
*/
this.deletedb = function(dbname){
//删除数据库
var self = this;
self.indexedDB.deleteDatabase(dbname);
console.log(dbname+'数据库已删除')
},
this.closeDB= function(db){
//关闭数据库
db.close();
console.log('数据库已关闭')
}
this.addData= function(db,storename,data){
//添加数据，重复添加会报错
var store = store = db.transaction(storename,'readwrite').objectStore(storename),request;
for(var i = 0 ; i < data.length;i++){
request = store.add(data[i]);
request.onerror = function(){
console.error('add添加数据库中已有该数据')
};
request.onsuccess = function(){
console.log('add添加数据已存入数据库')
};
}
}
this.putData= function(db,storename,data){
//添加数据，重复添加会更新原有数据
var store = store = db.transaction(storename,'readwrite').objectStore(storename),request;
for(var i = 0 ; i < data.length;i++){
request = store.put(data[i]);
request.onerror = function(){
console.error('put添加数据库中已有该数据')
};
request.onsuccess = function(){
console.log('put添加数据已存入数据库')
};
}
}
this.getDataByKey= function(db,storename,key){
//根据存储空间的键找到对应数据
var store = db.transaction(storename,'readwrite').objectStore(storename);
var request = store.get(key);
request.onerror = function(){
console.error('getDataByKey error');
};
request.onsuccess = function(e){
var result = e.target.result;
userObject= result;
console.log('查找数据成功')
console.log(result);
};
}
this.deleteData= function(db,storename,key){
//删除某一条记录
var store = store = db.transaction(storename,'readwrite').objectStore(storename);
store.delete(key)
console.log('已删除存储空间'+storename+'中'+key+'记录');
}
this.clearData= function(db,storename){
//删除存储空间全部记录
var store = db.transaction(storename,'readwrite').objectStore(storename);
store.clear();
console.log('已删除存储空间'+storename+'全部记录');
}
}
调用方法：
var user=[{
id:1,
name:user_name,
is_admin:data.is_admin,
password:password
}];
console.log(user)
var myDB=IndexedDBD.getDataBaseObject();
IndexedDBD.openDB(myDB,myDB.name,myDB.version);
setTimeout(function(){
var myDB=IndexedDBD.getDataBaseObject();
setTimeout(function(){
IndexedDBD.addData(myDB.db,myDB.ojstore.name,user);
},200);
},500);