工作中常用方法 js 篇 ​

// indexdb.js
class SkyDB {
  indexedDB = null
  dbName = null // 数据库名
  storeName = null // 表名
  db = null // 数据库对象
  version = 1
  constructor(dbName, storeName, version = 1) {
    this.indexedDB =
      window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB

    if (!this.indexedDB) {
      throw new Error('browser does not support indexedDB.')
    }

    if (!dbName) {
      throw new Error('database name cannot be empty.')
    }
    this.dbName = dbName

    if (!storeName) {
      throw new Error('table name cannot be empty.')
    }
    this.storeName = storeName

    this.version = version
  }

  openDatabase() {
    return new Promise((resolve, reject) => {
      let request = this.indexedDB.open(this.dbName, this.version)

      // 每次页面刷新都会走这
      request.onsuccess = (event) => {
        // 拿到数据库对象
        this.db = request.result
        resolve()
      }

      request.onerror = (err) => {
        reject(err)
      }

      // 监听第一次打开该数据库，或者数据库版本发生变化 事件
      // 如果指定的版本号，大于数据库的实际版本号，就会发生数据库升级事件，一般这里只会执行一次
      request.onupgradeneeded = (event) => {
        // 新建表和新建表的索引都必须在这个数据库中完成
        this.db = event.target.result
        // 判断是否有对应的表
        if (!this.db.objectStoreNames.contains(this.storeName)) {
          this.createStore()
        } else {
          this.deleteStore()
          this.createStore()
        }
      }
    })
  }
  // 删除数据库
  deleteDatabase() {
    this.indexedDB.deleteDatabase(this.dbName)
  }
  // 创建表
  createStore() {
    // 指定主键为一个递增的整数
    let objectStore = this.db.createObjectStore(this.storeName, {
      autoIncrement: true,
    })
  }
  // 删除表
  deleteStore() {
    this.db.deleteObjectStore(this.storeName)
  }

  async set(key, value) {
    try {
      const res = await this.get(key)
      const data = value === undefined ? null : value
      // 如果查到有数据，则走更新逻辑
      // 这里使用 undefined 的原因是，没有数据返回的就是 undefined
      if (res === undefined) {
        await this.add(key, data)
      } else {
        await this.put(key, data)
      }
    } catch (error) {
      throw new Error(error)
    }
  }
  // 往表添加数据
  add(key, value) {
    return new Promise((resolve, reject) => {
      // 开启一个事务，并拿到IDBObjectStore 对象
      let objectStore = this.db
        .transaction([this.storeName], 'readwrite')
        .objectStore(this.storeName)

      let result = objectStore.add(value, key)

      result.onsuccess = () => {
        resolve()
      }

      result.onerror = () => {
        reject()
      }
    })
  }
  // 更新表中的数据
  put(key, value) {
    return new Promise((resolve, reject) => {
      let objectStore = this.db
        .transaction([this.storeName], 'readwrite')
        .objectStore(this.storeName)

      let result = objectStore.put(value, key)

      result.onsuccess = () => {
        resolve()
      }

      result.onerror = () => {
        reject()
      }
    })
  }
  // 查询表中数据
  get(key) {
    return new Promise((resolve, reject) => {
      let objectStore = this.db
        .transaction([this.storeName], 'readwrite')
        .objectStore(this.storeName)

      let result = objectStore.get(key)

      result.onsuccess = () => {
        const res = result.result
        if (res || typeof res === 'boolean') {
          resolve(res)
        } else {
          resolve()
        }
      }

      result.onerror = () => {
        reject()
      }
    })
  }

  // 查询表中所有数据
  getAll() {
    return new Promise((resolve, reject) => {
      let objectStore = this.db
        .transaction([this.storeName], 'readwrite')
        .objectStore(this.storeName)

      let result = objectStore.getAll()

      result.onsuccess = () => {
        const res = result.result
        if (res || typeof res === 'boolean') {
          resolve(res)
        } else {
          resolve()
        }
      }

      result.onerror = () => {
        reject()
      }
    })
  }

  // 删除表中数据
  delete(key) {
    return new Promise((resolve, reject) => {
      let objectStore = this.db
        .transaction([this.storeName], 'readwrite')
        .objectStore(this.storeName)

      let result = objectStore.delete(key)

      result.onsuccess = () => {
        resolve()
      }

      result.onerror = () => {
        reject()
      }
    })
  }
  // 清空表
  clear() {
    return new Promise((resolve, reject) => {
      let objectStore = this.db
        .transaction([this.storeName], 'readwrite')
        .objectStore(this.storeName)

      let result = objectStore.clear()

      result.onsuccess = () => {
        resolve()
      }

      result.onerror = () => {
        reject()
      }
    })
  }
}