浏览器数据库 IndexedDB工具类

项目介绍

最近接触到了浏览器提供的本地数据库-IndexDB。通过学习文档发现使用起来比较繁琐。于是写了一个工具类WebDb.js用以简化操作。

一、引入

import WebDb from "../utils/WebDb";

二、初始化

首先初始化一个WebDb对象，其中 MyDb是数据库名，persion是创建的表名。

//初始化
const webDb = new WebDb('MyDb', 'person');

三、增删改查操作

增删改查操作对应insert, delete, update, select四个方法。这四个方法都返回的Promise对象，可以使用then来执行后续操作。

1、新增

//插入6条测试数据
webDb.insert({id: 1, name: '赵一', age: 11});
webDb.insert({id: 2, name: '钱二', age: 22});
webDb.insert({id: 3, name: '孙三', age: 23});
webDb.insert({id: 4, name: '李四', age: 24});
webDb.insert({id: 5, name: '周五', age: 25});
webDb.insert({id: 6, name: '吴六', age: 26});

2、查询

webDb.select(1).then(res => {
  console.log(res);
});

3、修改

webDb.update({id: 6, age: 30});

4、删除

webDb.delete(6);

一、完整代码

class WebDb {
  constructor(dbName, tableName, keyPath = 'id', version = 1) {
    this.dbName = dbName;
    this.tableName = tableName;
    this.keyPath = keyPath;
    this.version = version;
    this.db = null;
  }

  insert(entity) {
    return this._initDb().then(() => {
      return this._insert(entity);
    })
  }

  select(id) {
    return this._initDb().then(() => {
      return this._select(id);
    })
  }

  update(entity) {
    return this._initDb().then(() => {
      return this._update(entity);
    })
  }

  delete(id) {
    return this._initDb().then(() => {
      return this._delete(id);
    })
  }

  _initDb() {
    const promise = new Promise((resolve, reject) => {
      if (this.db) {
        resolve(this.db);
      } else {
        const request = window.indexedDB.open(this.dbName, this.version);

        request.onsuccess = event => {
          this.db = request.result;
          resolve(this.db);
        };

        request.onerror = event => {
          reject(event);
        };

        request.onupgradeneeded = event => {
          this.db = event.target.result;
          const objectStore = this.db.createObjectStore(this.tableName, {keyPath: this.keyPath});
        }
      }
    });
    return promise;
  }

  _insert(entity) {
    const promise = new Promise((resolve, reject) => {
      const request = this.db.transaction([this.tableName], 'readwrite')
        .objectStore(this.tableName)
        .add(entity);

      request.onsuccess = event => {
        resolve(event);
      };

      request.onerror = event => {
        reject(event);
      }
    });
    return promise;
  }

  _select(id) {
    const promise = new Promise((resolve, reject) => {
      const request = this.db.transaction([this.tableName])
        .objectStore(this.tableName)
        .get(id);

      request.onsuccess = event => {
        resolve(request.result);
      };

      request.onerror = event => {
        reject(event);
      }
    });
    return promise;
  }

  _update(entity) {
    const promise = new Promise((resolve, reject) => {
      const request = this.db.transaction([this.tableName], 'readwrite')
        .objectStore(this.tableName)
        .put(entity);

      request.onsuccess = event => {
        resolve(event);
      };

      request.onerror = event => {
        reject(event);
      }
    });
    return promise;
  }

  _delete(id) {
    const promise = new Promise((resolve, reject) => {
      const request = this.db.transaction([this.tableName], 'readwrite')
        .objectStore(this.tableName)
        .delete(id);

      request.onsuccess = event => {
        resolve(event);
      };

      request.onerror = event => {
        reject(event);
      }
    });
    return promise;
  }

}


export default WebDb;