封装

class IndexedDB {
  constructor(database, version, storeName) {
    this.database = database
    this.version = version
    this.storeName = storeName
    this.db = null
  }

  open() {
    return new Promise((resolve, reject) => {
      const request = indexedDB.open(this.database, this.version)

      request.onerror = (e) => {
        reject(e.target.error)
      }

      request.onsuccess = (e) => {
        this.db = e.target.result
        resolve(this.db)
      }

      request.onupgradeneeded = (e) => {
        const db = e.target.result
        db.createObjectStore(this.storeName, { keyPath: 'id', autoIncrement: true })
      }
    })
  }

  close() {
    if (this.db) {
      this.db.close()
    }
  }

  add(entity) {
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction(this.storeName, 'readwrite')
      const store = transaction.objectStore(this.storeName)
      const request = store.add(entity)

      request.onsuccess = (e) => {
        resolve({ ...entity, id: e.target.result })
      }

      request.onerror = (e) => {
        reject(e.target.error)
      }
    })
  }

  update(entity) {
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction(this.storeName, 'readwrite')
      const store = transaction.objectStore(this.storeName)
      const request = store.put(entity)

      request.onsuccess = () => {
        resolve(entity)
      }

      request.onerror = (e) => {
        reject(e.target.error)
      }
    })
  }

  delete(id) {
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction(this.storeName, 'readwrite')
      const store = transaction.objectStore(this.storeName)
      const request = store.delete(id)

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

      request.onerror = (e) => {
        reject(e.target.error)
      }
    })
  }

  getById(id) {
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction(this.storeName, 'readonly')
      const store = transaction.objectStore(this.storeName)
      const request = store.get(id)

      request.onsuccess = (e) => {
        resolve(e.target.result)
      }

      request.onerror = (e) => {
        reject(e.target.error)
      }
    })
  }

  getAll() {
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction(this.storeName, 'readonly')
      const store = transaction.objectStore(this.storeName)
      const request = store.getAll()

      request.onsuccess = (e) => {
        resolve(e.target.result)
      }

      request.onerror = (e) => {
        reject(e.target.error)
      }
    })
  }
}

使用

const db = new IndexedDB('databaseName', 1, 'storeName')

db.open().then(() => {
  // 添加数据
  db.add({ name: 'John', age: 24 }).then((entity) => {
    console.log('添加成功', entity)
  }).catch((error) => {
    console.error('添加失败', error)
  })

  // 更新数据
  db.update({ id: 1, name: 'John', age: 25 }).then((entity) => {
    console.log('更新成功', entity)
  }).catch((error) => {
    console.error('更新失败', error)
  })

  // 删除数据
  db.delete(1).then(() => {
    console.log('删除成功')
  }).catch((error) => {
    console.error('删除失败', error)
  })

  // 根据 ID 获取数据
  db.getById(1).then((entity) => {
    console.log('获取成功', entity)
  }).catch((error) => {
    console.error('获取失败', error)
  })

  // 获取所有数据
  db.getAll().then((entities) => {
    console.log('获取成功', entities)
  }).catch((error) => {
    console.error('获取失败', error)
  })
}).finally(() => {
  db.close()
})

需要注意的是，在使用 IndexedDB 时，我们需要保证每次操作都是在一个事务内完成的。如代码中所示，我们使用 transaction 和 objectStore 对象来进行事务和数据仓库的操作。每次操作都需要开启一个事务，在事务完成后及时关闭，以避免资源浪费。