浏览器存储indexDB介绍

首先indexDB是一个运行在浏览器的非关系型数据库，作为一个数据库，它存储的数据量就是没有上线的，同时它不仅可以存储字符串，还可以存储二进制数据。
主要特点:
1 键值对存储：indexDB内部采用对象仓库存放数据。所有类型的数据都可以直接存入，包括Javascript对象。在仓库中，数据以键值对的形式进行保存，每一个数据记录都有对应的主键，且主键是独一无二的，不能有重复。
2 异步： indexDB操作时是异步操作，不会锁死浏览器，用户在操作indexDB数据库时，可同时进行其他操作（页面渲染等），相比于localStorage的同步操作相比，有利于在大量数据进行读写操作时，避免影响网页的性能。
3 支持事务：IndexDB支持事务，支持在数据库操作失败后，整个事务取消，数据库会回滚到之前的状态，有利于保证数据的安全与完整性。
4 同源限制：IndexDB收到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能跨域访问。
5.支持二进制储存：IndexDB不仅可以存储字符串，还可以储存二进制树（ArrayBuffer对象和Blob对象）。
6.储存空间大：indexDB由于是数据库，所以存储量比一般方式要大很多，一般来说不少于250MB。
indexDB数据库中的基本概念:
1.数据库（IDBDatabase对象）：数据库是一系列相关数据的容器。每个域名（严格的说，是协议+域名+端口）都可以新建任意多个数据库，但他的版本的概念，同一时刻，只能有一个版本的数据库存在。如果要修改数据库结构（新增或删除表、索引或主键），只能通过升级数据库版本完成。
2.对象仓库（IDBObjectStore对象）每个数据库包含若干个对象仓库。它类似于关系型数据库的表格。
3.索引（IDBIndex）:为了加速数据的检索可以在对象仓库里面，为不同的属性建立索引。
4.事务（IDTransaction对象）：数据记录的读写和删除，都要通过事务完成。对象提供error、abort和complete三个监听事件监听操作结果。
5.操作请求（IDBRequest对象）。
6.指针（IDBCursor对象）。
7.主键集合（IDBKeyRange对象）。

代码示列:

1. 定义数据库初始变量
var db = null;
var db_table = null;
var databaseName = 'indexDB';
var version = 1;
var tableData = [{  //待存入数据
      id:1,
      name:'张一',
      age:  1,
      address:'西安'
  }]
2. 打开数据库
window.indexDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; //获取浏览器支持的indexDB数据库
var request = window.indexedDB.open(databaseName, version);
 
/*
*数据仓库打开失败
*/
request.onerror = function (error){
     console.log('IndexDB打开失败',error);
}
 
/*
*数据仓库打开成功
*/
request.onsuccess = function (res){
     db = res.target.result; //打开成功后用变量db存储数据库对象
}
 
/*
*数据仓库升级事件(第一次新建库是也会触发，因为数据仓库从无到有算是升级了一次)
*/
request.onupgradeneeded = function (res){
     db = res.target.result;
     //在数据库中创建表group,设置主键为id
     db_table = db.createObjectStore('tableA', { keyPath: 'id' });  
     //创建索引indexName指向表中的name字段且设为唯一值，不能重复
     db_table.createIndex('indexName', 'name', { unique: false });
};
3. 存储数据
var store = db.transaction(['tableA'], 'readwrite').objectStore('tableA');

/*
*add方法添加数据
*@params 需要添加的数据信息
*/
var transaction = store.add(tableData);//将上面创建的数据加入数据库
/*
*添加成功
*/
transaction.onsuccess = function (event) {
    console.log('数据添加成功',event);
};
/*
*添加失败
*/
transaction.onerror = function (event) {
    console.log('数据添加失败',event);
};
4. 读取数据
var store = db.transaction(['tableA']).objectStore('tableA');

/*
*get方法获取数据
*@params 数据的主键
*/
var transaction = store.get(1); 
/*
*获取成功
*/
transaction.onsuccess = function (event) {
    if(event.target.result){
        console.log('数据获取成功',event);
    }
    else{
        console.log('未获取到数据');
    }
};

/*
*获取失败
*/
transaction.onerror = function (event) {
    console.log('数据获取失败',event);
};
5. 更新数据
var store = db.transaction(['tableA']).objectStore('tableA');
/*
*put方法根据主键更新数据
*@params 数据的主键
*/
var transaction = store .get(1);

transaction.onsuccess = function(event){
	let oldData = event.target.result
	oldData.age = 30
	const update = store.put(oldData)
	update.onerror=function(err){
		console.log(err)
	}
	update.onsuccess = function(event){
		console.log('完成更新')
	}
};
6. 删除数据
var transaction = db.transaction(["tableA"], "readwrite")
                .objectStore("tableA")
                .delete("1");//按主键删除
transaction.onsuccess = function(event) {
  // It's gone!
};
transaction.onerror = function(event) {
  // It's gone!
};
7. 使用索引
var store = db.transaction(['tableA']).objectStore('tableA');

/*
*index方法获取索引对象
*get方法获取数据
*@params 数据的索引
*/
var request = store.index('indexName').get('张四'); 

/*
*获取成功
*/
request.onsuccess = function (event) {
     console.log('通过索引获取数据成功',event);
};

/*
*获取失败
*/
request.onerror = function (event) {
    console.log('通过索引获取数据失败',event);
};
8. 使用指针遍历所有值
var objectStore = db.transaction("tableA").objectStore("tableA");

objectStore.openCursor().onsuccess = function(event) {
  var cursor = event.target.result;
  if (cursor) {
    console.log("Name for SSN " + cursor.key + " is " + cursor.value.name);
    cursor.continue();
  }
  else {
    console.log("No more entries!");
  }
};

//另一种遍历方式
objectStore.getAll().onsuccess = function(event) {
  console.log("Got all objects" + event.target.result);
};
9. 指定光标范围方向
var index = objectStore.index("indexName");
const range = IDBKeyRange.bound(1,10);//遍历id从1到10的数据
index.openCursor(boundKeyRange).onsuccess = function(event) {
  var cursor = event.target.result;
  if (cursor) {
    cursor.continue();
  }
};

在indexDB中，可以创建多个数据库，数据库中可以创建多张表，每张表中可以存储多条数据，当需要存储的数据复杂度高且数据量大时建议使用indexDB。