一行代码，搞定浏览器数据库 IndexedDB

前言

2021 年，如果你的前端应用，需要在浏览器上保存数据，有三个主流方案可以选择：

• Cookie：上古时代就已存在，但能应用的业务场景比较有限
• LocalStorage：使用简单灵活，但是容量只有 10Mb，且储存 JS 对象存在问题
• IndexedDB：算得上真正意义上的数据库，功能强大，但坑异常多，使用麻烦，古老的 API 设计放在现代前端工程中总有种格格不入的感觉

关于这三者的区别与应用场景，可以参考我写的 深入浅出前端本地储存

我在大三的时候，曾经用 IndexedDB 写过一个背单词 App，当时就有把 IndexedDB 封装一遍的想法，但是由于学业紧张，后来就搁置了

最近，我终于有了空闲时间，于是捡起了当年的想法，开始尝试用 TypeScript 把 IndexedDB 封装一遍，把坑一个个填上，做成一个开发者友好的库，并开源出来，上传至 npm

拍脑袋后，我决定把这个项目命名为 GoDB.js

GoDB.js

GoDB 的出现，让你即使你不了解浏览器数据库 IndexedDB，也能把它用的行云流水，从而把关注点放到业务上面去

毕竟要用好 IndexedDB，你需要翻无数遍 MDN，而 GoDB 替你吃透了 MDN，从而让你把 IndexedDB 用的更好的同时，操作还更简单了

当前项目处于 Alpha 阶段（版本 0.4.x），意味着之后随时可能会有 breaking changes，在正式版（1.0.0 及以后）发布之前，不要把这个项目用到任何严肃的场景下

项目GitHub：
https://github.com/chenstarx/GoDB.js

如果觉得不错的话就点个 Star 吧~

项目完整文档与官网正在紧张开发中，现阶段可以通过下面的 demo 来尝鲜

安装

首先需要安装，这里默认你使用了 webpack、gulp 等打包工具，或在 vue、react 等项目中

npm install godb

在第一个正式版发布后，还会提供 CDN 的引入方式，敬请期待~

简单上手

操作非常简单，增、删、改、查各只需要一行代码：

import GoDB from 'godb';

const testDB = new GoDB('testDB');
const user = testDB.table('user');

const data = {
    name: 'luke', age: 22 };

user.add(data) // 增
  .then(luke => user.get(luke.id)) // 查
  .then(luke => user.put({
    ...luke, age: 23 })) // 改
  .then(luke => user.delete(luke.id)); // 删

• Table.get()，Table.add() 和 Table.put() 都返回完整数据
• Table.delete() 不返回数据（返回 undefined）

需要注意的就是，put(obj) 方法中的 obj 需要包含 id，否则就等价于 add(obj)

上面的 demo 中，get() 得到的 luke 对象包含 id，因此是修改操作

之后会引入一个 update 方法来改进这个问题

也可以一次性添加多条数据：

const data = [
    {
    name: 'luke', age: 22 },
    {
    name: 'elaine', age: 23 }
];

user.addMany(data)
  .then(() => user.consoleTable());

Table.consoleTable()

这里用了一个 Table.consoleTable() 的方法，它会在浏览器的控制台打印出下面的内容：

这里的 (index) 就是 id

虽然 chrome 开发者工具内就能看到表内所有数据，但这个方法好处是可以在需要的时候打印出数据，方便 debug

注意：这个方法是异步的，因为需要在数据库里把数据库取出来；异步意味着紧接在它后面的代码，可能会在打印出结果之前执行，如果不希望出现这种情况，使用 await 或 Promise.then 即可

addMany(data) 方法：

• 严格按照 data 的顺序添加
• 返回 id 的数组，与 data 顺序一致

之所以单独写个 addMany，而不在 add 里加一个判断数组的逻辑，是因为用户想要的，可能就是添加一个数组到数据库中

注意：addMany 和 add 不要同步调用，如果在 addMany 正在执行时调用 add，可能会导致数据库里的顺序不符合预期，请在 addMany 的回调完成后再调用 add（未来可能会引入一个队列来修复这个问题）

Table.find()

如果你想在数据库中查找数据，还可以使用 Table.find() 方法：

const data = [
    {
    name: 'luke', age: 22 },
    {
    name: 'elaine', age: 23 }