icepro`s blog

搜索

SearchSearch

最近的笔记

查看更多20篇笔记 →

探索

IndexDB 初用解析 & Dexie

2020年7月04日10分钟阅读访问量:N/A

什么是 IndexDB

随着浏览器的功能逐渐增强，我们不可避免的需要在前端处理越来越多的数据，除了数据，我们甚至可能需要对 cache 作出更加丰富的操作。

那么问题来了，用什么工具更加合适呢？

cookie 是我们常见数据持久化方案，但是他的大小仅仅只有 4k，并且随着 cookie 的增大，你的请求携带的cookie 也随之增加，这显然是不划算的。

localstorage 是一个不错的方案，他的大小也是勉强够用的，约 2.5M 随着各个浏览器大小的不同而发生改变，比如 chrome1 他的大小就有 10M

当然咯有一些成熟的库对 localstorage 作出了一定程度上的封装来减少存取的难度，但是实际上，它在某些痛点上并不能很好的解决这些问题。（这会在后文指出）

所以 IndexDB 应运而生，用于处理这些复杂而麻烦的任务。

IndexDB 顾名思义，是一个 db。

各位前端的小伙伴相比都是用 node 的，对于 node 我们最喜欢也最常用的是 mongodb。

IndexDB 和 mongo 类似 是一个 nosql 数据库，并且非常像 redis，是一个 键值数据库，所以这货所存储的聚合不一定非要是领域对象，任何数据结构都可以，比如list、set、hash 等数据结构，而且支持某些高级的集合操作，比如求 交集/并集/差集 （当然用起来不是一般的麻烦，我觉得 LINQ 才是最好的数据处理方式）

为什么 IndexDB

那么就需要讲讲为什么要用 IndexDB 了，任何技术都有其适用环境，那么 IndexDB 的优点是什么呢？

  • 异步
  • key-value 形式保存数据，几乎所有的 js 类型都能被储存在内（数组，对象等）
  • 支持事务
  • 储存空间极大，最少 250MB，最大可以达到硬盘容量的 20%（域策略限制） * 50%（浏览器策略限制） = 10%
  • 支持二进制储存（blob，buffer）

显而易见的这货是一个 数据库 。

那么应用的场景就很明确了，比如你需要前端数据库的时候自然而然的就会考虑用上他了。

比如，你作为一个浏览器端的工具，需要离线使用，并且你是一个 博客编辑器，那就很有意思了，假设断网了，你的 post 岂不是不能用？当然不是的，结合 pwa + IndexDB，他可以在脱机情况下正常使用，直至网络恢复，在重新使用 IndexDB 内部的数据同步到服务器。

这是一个合理的应用场景，因为 localstorage 不能很好的支持图片缓存，而 IndexDB 却能很好的提供支持。

更有意思的是，你离线的时候，由于博文的内容已经被下载下来，那么自然而然的，脱机情况下你可以访问任何已经被缓存的数据，甚至像有网络的时候一样去用它。

兼容性

image-20200630164112604

怎么使用？

IndexDb 原生的概念有点复杂，并且包含了很多数据库相关的知识，如果有数据的经验，你会更好的掌握他的使用方法。

不过由于IndexDB 的 API 过于接近底层，事实上远远不如 sql 来的直观好用。

IndexDB 的对象

  • 数据库对象
  • 对象仓库
  • 索引
  • 事务
  • 操作请求
  • 指针
  • 主键集合

对于 IndexDB我这里只是简单的讲述一下如何建立一个数据库并且链接，如何增删改查，更加细节的内容则不多赘述，建议前往 MDN 学习 / 或者看 阮老师的 相关博客2

这里简单的列一下详细内容建议参考 wangDoc.com3

var request = window.indexedDB.open(databaseName, version);
var db;
// 新建数据库
request.onupgradeneeded = function (event) {
  db = event.target.result;
  var objectStore;
  if (!db.objectStoreNames.contains('person')) {
    objectStore = db.createObjectStore('person', { keyPath: 'id' });
  }
  // 建立主键
  var objectStore = db.createObjectStore(
    'person',
    { autoIncrement: true }
  );
  // 添加一条记录
  var request = db.transaction(['person'], 'readwrite')
    .objectStore('person')
    .add({ id: 1, name: '张三', age: 24, email: 'zhangsan@example.com' });
 
}

更好的解决方案

原生的 IndexDB 讲句实话，非常的不直观，也不符合正常的使用逻辑。

那么有更好的解决方案么？

当然有的，那就是 dexieJs ！

dexieJs

这是一套相对简单的 ORM 框架（个人认为），他提供了一套更加符合直觉和用户常用习惯的 api 辅助使用。

那么如何使用捏，这边举一个例子：

import Dexie from 'dexie';
export const db = new Dexie('pcr_sim');
/**
 * @interface IDRole
 * @property {string} jp_name
 * @property {string} cn_name
 * @property {number} id
 * @property {number} star
 */
/**
 * @interface IDRoleName
 * @property {string} name
 * @property {string} role_id
 */
db.version(2).stores({
  /** 角色列表，用于定向精确查找 **/
  roles: '&id,jp_name,cn_name,star',
  /** 角色名字列表，包含 jp 和 cn **/
  roleName: '[name+role_id]',
  /** 人物列表 **/
  box: '&id',
  /** 活动表 **/
  activity: 'id,*time_start,*time_end,type,json',
  /** 模拟缓存表 **/
  sim: 'id++,uid,time,json,seed',
  /** 模拟用户表 seed 是种子 **/
  simUser: 'id, seed',
  /** 模拟用户在给定时间的卡池 **/
  simBox: 'uid, role_id, time',
});
function logErr(e) {
  console.error(e.stack || e);
}
/**
 * work should never call this
 * @type {IRole[]}
 * @param jsons
 */
export function createOrUpdateRoleDb(jsons) {
  return db
    .transaction('rw', db.roles, db.roleName, async () => {
      const roles = jsons.map((v) => ({
        id: v.id,
        jp_name: v.id,
        cn_name: v.cn_name,
        star: 1,
      }));
      const names = [];
      jsons.forEach(({ cn_name, nick_names, jp_name, id }) => {
        names.push({ name: cn_name, role_id: id });
        names.push({ name: jp_name, role_id: id });
        nick_names &&
          nick_names.forEach((nick_name) => {
            names.push({
              name: nick_name,
              role_id: id,
            });
          });
      });
      await db.roles.bulkPut(roles);
      await db.roleName.bulkPut(names);
    })
    .catch(logErr);
}
 
/**
 * @param {Array<{id: number, time_start: number, time_end: number, type: string, json: Object}>} jsons
 */
export function createOrUpdateActivity(jsons) {
  return db
    .transaction('rw', db.activity, async () => {
      await db.activity.clear();
      return db.activity.bulkAdd(jsons);
    })
    .catch(logErr);
}
 
/**
 * @param {Array<{id: number, star: number}>} json
 * @return {PromiseExtended<unknown>}
 */
export function updateRoleStars(json) {
  return db.transaction('rw', db.roles, async () => {
    await db.roles.bulkPut(json);
  });
}
 
/**
 *
 * @param {number} time
 * @return {Promise<Array<{id: number, time_start: number, time_end: number, type: string, json: {pick_up: (string|number|IDRole)[][], is_double: boolean}}>>}
 */
export function getActivityBeforeTime(time) {
  return db.activity.where('time_start').below(time).toArray();
}
/**
 * 依照 id 查找指定role
 * @param {number} id
 * @return {Promise<IDRole>}
 */
async function getRoleById(id) {
  return db.roles.get(id);
}
 
/**
 *
 * @param {string} name
 * @return {Promise<IDRole[]>}
 */
export async function getRoleByName(name) {
  const data = await db.roleName
    .where(['name', 'role_id'])
    .between([name, Dexie.minKey], [name, Dexie.maxKey])
    .first();
  if (!data) {
    return null;
  }
  return getRoleById(data.role_id);
}

就比如上面这些 db 操作常见的增删改查都出现了，基本可以覆盖绝大部分使用情况了。

这里 有新手教学，以及更加详细的 API

注意事项

这里值得注意的是，IndexDB 也有着和 后端数据库一样的问题，就是批量修改远大于多次修改。

反应在 dexie 上就是：

10000 个 role 的创建需要约 18秒，而 bulkAdd 或者 bulkPut 只需要约 70 - 120 毫秒不到。如果添加了主键索引则速度可以更快。

当然你插入的时候可以不用 await 来显著的提升性能，卡浏览器的事儿能叫提升性能么，什么叫做卡死标签页【战术后仰】

当然咯，受限于实现，如果按照后端的那种方式去用的话，相比较后端成熟的 MySQL/MariaDB/PostgreSQL/Oracle 等数据库简直慢的如牛爬，但是对于前端这种，对于查询时间相对并不是太过敏感的使用环境，其查询速度的缺点已经被其巨大的优势所掩盖，当然事实上我们还有一个更加强大的工具 —— websql（可惜这货只有chrome 可怜巴巴的支持。）

脚注

  1. https://chromiumcodereview.appspot.com/21680002 ↩

  2. http://www.ruanyifeng.com/blog/2018/07/indexeddb.html ↩

  3. https://wangdoc.com/javascript/bom/indexeddb.html ↩

本文标题：IndexDB 初用解析 & Dexie

永久链接：https://iceprosurface.com/2020/07/04/2020/dexiejs/

作者授权：本文由 icepro 原创编译并授权刊载发布。

版权声明：本文使用「署名-非商业性使用-相同方式共享 4.0 国际」创作共享协议，转载或使用请遵守署名协议。

查看源码：

关系图谱

反向链接

最近的笔记

查看更多20篇笔记 →