rxjs封裝超簡超實用indexed db接口

瀏覽器端 indexed db 封裝成更簡潔易操做的接口, 數據庫變化監控!

技術棧

• rxjs 強大的異步管理庫

demo

import { openIdb, IDbInstall } from "imeepos/idb";
async function bootstrap() {
  let update: IDbInstall = {
    [`0-1`]: {
      create: [
        {
          name: "member",
          autoIncrement: true,
          keyPath: "id",
          index: [
            {
              name: "openid",
              keyPath: "openid",
              unique: true
            }
          ]
        }
      ]
    }
  };
  let db = await IDB.open("imeepos", 1, update, true).toPromise();
  // 監控member表數據變化
  let obs = db
    .readonly("member")
    .count(true)
    .pipe(distinctUntilChanged())
    .subscribe(res => console.log(res));
  let id = 1;
  setInterval(() => {
    // 插入
    db.readwrite("member")
      .add({
        openid: `fromUser${++id}`
      })
      .subscribe();
  }, 1000);
}
bootstrap();
複製代碼

docs

IDB.open

export class IDB {
  static open(
    name: string = "imeepos",
    version: number = 1,
    install?: IDbInstall,
    listen?: boolean
  ): Observable<IDB>;
}
複製代碼

IDbInstall

// 改變數據庫的操做
export type IDBChange = "add" | "delete" | "clear" | "put";
// 新建
interface IdbCreate extends IDBObjectStoreParameters {
  name: string;
  index: IdbIndex[];
}
// 索引
interface IdbIndex extends IDBIndexParameters {
  name: string;
  keyPath: string | string[];
}
export interface IDbInstall {
  [key: string]: {
    // 增
    create?: IdbCreate[];
    // 改
    update?: {
      [key: string]: {
        create: IdbIndex[];
        delete: string[];
      };
    };
    // 刪
    delete?: string[];
  };
}
複製代碼

OpenIdbResult

// IDB.open返回結果
export class IDB {
  constructor(public db: IDBDatabase, public name: string);
  change(tableName: string, type: IDBChange): void;
  addListener(tableName, it: any): void;
  removeListener(tableName: string, item: any): void;
  transaction( storeNames: string | string[], mode?: IDBTransactionMode ): IDBTransaction;
  readonly(name: string): IDBReadonly;
  index(name: string): IDBIndexed;
  readwrite(name: string): IDBReadWrite;
}
複製代碼

IDBReadonly

export interface IDBReadonly {
  count(key?: IDBValidKey | IDBKeyRange): Observable<number>;
  get(query: IDBValidKey | IDBKeyRange): Observable<any | undefined>;
  getAllKeys(
    query?: IDBValidKey | IDBKeyRange,
    count?: number
  ): Observable<IDBValidKey[]>;
  getKey(query: IDBValidKey | IDBKeyRange): Observable<IDBValidKey | undefined>;
  openCursor(
    range?: IDBValidKey | IDBKeyRange,
    direction?: IDBCursorDirection
  ): Observable<IDBCursorWithValue | null>;
  openKeyCursor(
    query?: IDBValidKey | IDBKeyRange,
    direction?: IDBCursorDirection
  ): Observable<IDBCursor | null>;
}
複製代碼

IDBReadWrite

export interface IDBReadWrite extends IDBReadonly {
  add(value: any, key?: IDBValidKey | IDBKeyRange): Observable<IDBValidKey>;
  delete(key: IDBValidKey | IDBKeyRange): Observable<undefined>;
  clear(): Observable<undefined>;
  put(value: any, key?: IDBValidKey | IDBKeyRange): Observable<IDBValidKey>;
}
複製代碼

IDBIndexed

export class IDBIndexed extends IDBReadonly {}
複製代碼