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

Posted 2022-11-29

​​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:[e-mail] 
  ,  
      id:2,
      name:张二,
      age:  2,
      email:[e-mail] 
  ,  
      id:3,
      name:张三,
      age:  3,
      email:[e-mail] 
  ,  
      id:4,
      name:张四,
      age:  4,
      email:[e-mail] 
  ,  
      id:5,
      name:张五,
      age:  5,
      email:[e-mail] 
  ]

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:[e-mail]
);

/*
*添加成功
*/
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:[e-mail] 
                      );

/*
*更新成功
*/
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);
;