#yyds干货盘点#前端存储之indexDB

​​localStorage​​​ 是前端本地存储的一种，其容量一般在 ​​5M-10M​​ 左右，用来缓存一些简单的数据基本够用，毕竟定位也不是大数据量的存储。

在某些场景下 ​​localStorage​​ 的容量就会有点捉襟见肘，其实浏览器是有提供大数据量的本地存储的如 ​​IndexedDB​​ 存储数据大小一般在 ​​250M​​ 以上。

弥补了​​localStorage​​​容量的缺陷，但是使用要比​​localStorage​​复杂一些。

IndexDB 是一个运行在浏览器上的非关系型数据库。既然是数据库了，那就不是 5M、10M 这样小打小闹级别了。理论上来说，IndexDB 理论上是没有存储上限的一般来说不会小于 250M）。它不仅可以存储字符串，还可以存储二进制数据。

​主要特点

1. 键值对储存IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以"键值对"的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。
2. 异步 IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。
3. 支持事务IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。
4. 同源限制IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。
5. 支持二进制储存IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象。
6. 储存空间大IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。储 存 在 电 脑 上 中 的 位 置 为 C:\Users\当 前 的 登 录 用 户\AppData\Local\Google\Chrome\User Data\Default\IndexedDB

基本概念

1. 数据库（IDBDatabase 对象）数据库是一系列相关数据的容器。每个域名（严格的说，是协议 + 域名 + 端口）都可以新建任意多个数据库。但是它版本的概念。同一个时刻，只能有一个版本的数据库存在。如果要修改数据库结构（新增或删除表、索引或者主键），只能通过升级数据库版本完成。
2. 对象仓库（IDBObjectStore 对象）每个数据库包含若干个对象仓库（object store）。它类似于关系型数据库的表格。
3. 索引（IDBIndex 对象）为了加速数据的检索，可以在对象仓库里面，为不同的属性建立索引。
4. 事务（IDBTransaction 对象）数据记录的读写和删改，都要通过事务完成。事务对象提供error、abort和complete三个事件监听操作结果。
5. 操作请求（IDBRequest 对象）。
6. 指针 (IDBCursor 对象)。
7. 主键集合 （IDBKeyRange 对象）。

操作步骤

1. 定义变量

var db = null;
var db_table = null;
var databaseName = 'indexDB';
var version = 1;
var data = [{  
      id:1,
      name:'张一',
      age:  1,
      email:'zhangsan@example.com' 
  },{  
      id:2,
      name:'张二',
      age:  2,
      email:'zhangsan@example.com' 
  },{  
      id:3,
      name:'张三',
      age:  3,
      email:'zhangsan@example.com' 
  },{  
      id:4,
      name:'张四',
      age:  4,
      email:'zhangsan@example.com' 
  },{  
      id:5,
      name:'张五',
      age:  5,
      email:'zhangsan@example.com' 
  }]

2. 打开数据仓库

/*
*@databaseName 数据仓库的名字
*@version 数据仓库的版本
*/

var request = window.indexedDB.open(databaseName, version);
 
/*
*数据仓库打开失败
*/
request.onerror = function (error){
     console.log('IndexDB打开失败',error);
}
 
/*
*数据仓库打开成功
*/
request.onsuccess = function (res){
     console.log('IndexDB打开成功',res);
     db = res.target.result;
}
 
/*
*数据仓库升级事件(第一次新建库是也会触发，因为数据仓库从无到有算是升级了一次)
*/
request.onupgradeneeded = function (res){
     console.log('IndexDB升级成功',res);
     db = res.target.result;
     db_table = db.createObjectStore('group', { keyPath: 'id' });
     db_table.createIndex('indexName', 'name', { unique: false });
}

2. 新建表和创建索引

request.onupgradeneeded = function (res){
     console.log('IndexDB升级成功',res);
     /*
     *返回indexDB对象
     */
     db = res.target.result;
     
     /*
     *创建数据仓库
     *@params 数据仓库名
     *@params 数据仓库配置项 keypath：主键，也可以 autoIncrement: true 自动生成
     */
     db_table = db.createObjectStore('group', { keyPath: 'id' });
     
     /*
     *创建数据索引
     *@params 索引名称
     *@params 索引所在的属性
     *@params 配置对象（说明该属性是否包含重复的值）
     */
     db_table.createIndex('indexName', 'name', { unique: false });
}

3. 新增数据 新增数据需要通过事务来完成, 写入数据需要新建一个事务, 新建时必须指定表格名称和操作模式（"只读"或"读写"）。

/*
*新建事务
*@params 数据仓库的数组
*@params 写入模式
*/
var store = db.transaction(['group'], 'readwrite').objectStore('group');

/*
*add方法添加数据
*@params 需要添加的数据信息
*/
var request = store.add({
    id:new Date().getTime(),
    name:'王二',
    age:12,
    email:'XXXX@xxx.com'
});

/*
*添加成功
*/
request.onsuccess = function (event) {
    console.log('数据添加成功',event);
};

/*
*添加失败
*/
request.onerror = function (event) {
    console.log('数据添加失败',event);
};

4. 读取数据

读取数据也是通过事务完成。

/*
*新建事务
*@params 数据仓库的数组
*/
var store = db.transaction(['group']).objectStore('group');

/*
*get方法获取数据
*@params 数据的主键
*/
var request = store.get(1); 

/*
*获取成功
*/
request.onsuccess = function (event) {
    if(event.target.result){
        console.log('数据获取成功',event);
    }
    else{
        console.log('未获取到数据');
    }
};

/*
*获取失败
*/
request.onerror = function (event) {
    console.log('数据获取失败',event);
};

5. 更新数据 更新数据要使用 IDBObject.put()方法

/*
*新建事务
*@params 数据仓库的数组
*@params 写入模式
*/
var store = db.transaction(['group']).objectStore('group');

/*
*put方法根据主键更新数据
*@params 数据的主键
*/
var request = store .put({  
                          id:1,
                          name:'张一'+Math.random(),
                          age:  24,
                          email:'zhangsan@example.com' 
                      });

/*
*更新成功
*/
request.onsuccess = function (event) {
    console.log('数据更新成功',event);
};

/*
*更新失败
*/
request.onerror = function (event) {
    console.log('数据更新失败',event);
};

6. 删除数据

/*
*新建事务
*@params 数据仓库的数组
*/
var store = db.transaction(['group']).objectStore('group');

/*
*delete方法删除数据
*@params 数据的主键
*/
var request = store.delete(1); 

/*
*删除成功
*/
request.onsuccess = function (event) {
    console.log('数据删除成功',event);
};

/*
*删除失败
*/
request.onerror = function (event) {
    console.log('数据删除失败',event);
};