使用 Promise 封装 indexedDB #

function promisify(request, type) {
  return new Promise((resolve, reject) => {
    request.onsuccess = (event) => {
      const returnMap = {
        event: event.target.result,
        request: request.result,
        msg: "操作成功"
      };
      resolve(returnMap[type || "msg"])
    };
    request.onerror = (event) => reject(event.target.error || '操作失败')
  })
}

class LDB {

  static indexedDB;
  constructor(options) {
    this.name = options.name;
    this.version = options.version;
    this.initDB(options.store);
  }

  // 单例模式
  static getInstance(options) {
    this.indexedDB = this.indexedDB ? this.indexedDB : new LDB(options);
    return this.indexedDB;
  }

  initDB(store) {
    const request = indexedDB.open(this.name, this.version);
    request.onupgradeneeded = (event) => {
      const db = event.target.result;
      for (let i = 0; i < store.length; i++) {
        if (db.objectStoreNames.contains(store[i].name)) {
          continue;
        }

        const objectStore = db.createObjectStore(store[i].name, { keyPath: store[i].key });
        for (let j = 0; j < store[i].cursorIndex.length; j++) {
          const element = store[i].cursorIndex[j];
          objectStore.createIndex(element.name, element.name, {
            unique: element.unique
          });
        }
      }
    }

    request.onerror = () => Promise.reject('初始化数据库失败');
    request.onsuccess = () => Promise.resolve('初始化数据库成功');
  }

  openDB() {
    const request = indexedDB.open(this.name, this.version);
    return promisify(request, "event");
  }

  async insertData(table, data) {
    try {
      const db = await this.openDB();
      const transaction = db.transaction(table, 'readwrite');
      const objectStore = transaction.objectStore(table);

      // 如果添加的数据不是数组
      if (!Array.isArray(data)) {
        const request = objectStore.add(data);
        return promisify(request);
      }

      data.forEach(item => {
        objectStore.put(item);
      })

      return new Promise((resolve, reject) => {
        transaction.oncomplete = () => {
          resolve('所有数据插入成功');
        }

        transaction.onerror = (event) => {
          reject(event)
        }
      })
    } catch (err) {
      return Promise.reject(error)
    }
  }

  async getObjectStore(table, type) {
    try {
      const db = await this.openDB();
      return db.transaction(table, type).objectStore(table);
    } catch (error) {
      return Promise.reject(error);
    }
  }

  // 获取单条数据时，必须要添加cursorValue才可以去得到
  async getData(table, cursorKey, cursorValue) {
    console.log(cursorKey)
    try {
      const objectStore = await this.getObjectStore(table);
      const request = cursorValue ? objectStore.index(cursorKey).get(cursorValue) : objectStore.get(cursorKey);
      const result = await promisify(request, "request");
      return result
    } catch (error) {
      return Promise.reject(error);
    }
  }

  async getAllData(table) {
    try {
      const objectStore = await this.getObjectStore(table);
      const request = objectStore.getAll();
      const result = await promisify(request, "request");
      return result ? result : [];
    } catch (error) {
      return Promise.reject(error);
    }
  }

  async clearDB(table) {
    try {
      const objectStore = await this.getObjectStore(table, "readwrite");

      const request = objectStore.clear();
      return promisify(request);
    } catch (error) {
      return Promise.reject(error);
    }
  }

    /**
   * 通过游标来获取表的数据,性能较好
   * @param table 表名
   * @param keyRange 查询的范围；IDBKeyRange对象，内容传 表主键的值
   */
     async getDataByCursor(table, keyRange) {
      try {
        console.time("getDataByCursor");
        const objectStore = await this.getObjectStore(table);
        const cursorRequest = objectStore.openCursor(keyRange);
  
        return new Promise((resolve, reject) => {
          let results  = [];
  
          cursorRequest.onerror = reject;
          cursorRequest.onsuccess = (e) => {
            const cursor = e.target.result;
            // console.log(e);
  
            if (cursor) {
              // cursor.key 是一个 name, 就像 "Bill", 然后 cursor.value 是整个对象
              results.push(cursor.source);
              cursor.continue();
            } else {
              console.timeEnd("getDataByCursor");
              // 遍历之后的 object 数据列表的结果
              resolve(results);
            }
          };
        });
      } catch (error) {
        return Promise.reject(error);
      }
    }
}

// ----------- 数据库使用

const data = {
  itemId: "2489",
  goodsId: "2001857",
  barcode: "6902265360100",
  category: "调味油汁/料酒类",
  name: "海天上等蚝油260g",
  brand: "海天",
  specification: "260g瓶",
  status: 1,
  statusDesc: "",
  itemSkuId: "2540",
};

let storeData = [];
for (let i = 0; i < 10000; i++) {
  const item = {
    ...data,
    id: i,
    name: data.name + i,
    goodsId: data.goodsId + i,
  };

  storeData.push(item);
}

// 数据库的结构
const store = [
  {
    name: "goods",
    key: "id",
    cursorIndex: [
      { name: "name", unique: false },
      { name: "goodsId", unique: true },
    ],
  },
];

const database = LDB.getInstance({ store: store, name: 'db', version: 1 });

database.insertData("goods", storeData); // 耗时：insertData: 1266.023193359375ms

database.getData("goods", "name", "海天上等蚝油260g0").then(res => {
  console.log(res)
})
// database.getAllData("goods").then((val) => console.log(val));

database.getDataByCursor("goods", IDBKeyRange.bound(0, 20)).then((val) => console.log(val));