indexedDB的入门使用

1、先封装一个database文件，方便调用

database.ts文件：

export class Database {
  _dbName = '' // 数据库名称
  _dbVersion = 1
  _db = null
  constructor({ dbName, dbVersion }) {
    this._dbName = dbName
    dbVersion && (this._dbVersion = dbVersion)
  }
  // 打开数据库
  openDatabase() {
    return new Promise((resolve, reject) => {
      const request = indexedDB.open(this._dbName, this._dbVersion)

      request.onerror = function (event) {
        reject('Database error: ' + event.target.errorCode)
      }

      request.onsuccess = function (event) {
        this._db = event.target.result
        resolve('Database opened successfully')
      }.bind(this)
    })
  }

  // 添加数据
  addData(objectStoreName, data) {
    const transaction = this._db.transaction([objectStoreName], 'readwrite')
    const objectStore = transaction.objectStore(objectStoreName)

    return new Promise((resolve, reject) => {
      const request = objectStore.add(data)

      request.onsuccess = function (event) {
        resolve('Data added successfully')
      }

      request.onerror = function (event) {
        reject('Error adding data: ' + event.target.errorCode)
      }
    })
  }

  // 更新数据
  updateData(objectStoreName, key, newData) {
    const transaction = this._db.transaction([objectStoreName], 'readwrite')
    const objectStore = transaction.objectStore(objectStoreName)

    return new Promise((resolve, reject) => {
      const request = objectStore.put(newData, key)

      request.onsuccess = function (event) {
        resolve('Data updated successfully')
      }

      request.onerror = function (event) {
        reject('Error updating data: ' + event.target.errorCode)
      }
    })
  }

  // 删除数据
  deleteData(objectStoreName, key) {
    const transaction = this._db.transaction([objectStoreName], 'readwrite')
    const objectStore = transaction.objectStore(objectStoreName)

    return new Promise((resolve, reject) => {
      const request = objectStore.delete(key)

      request.onsuccess = function (event) {
        resolve('Data deleted successfully')
      }

      request.onerror = function (event) {
        reject('Error deleting data: ' + event.target.errorCode)
      }
    })
  }

  // 查询数据
  getData(objectStoreName, key) {
    const transaction = this._db.transaction([objectStoreName], 'readonly')
    const objectStore = transaction.objectStore(objectStoreName)

    return new Promise((resolve, reject) => {
      const request = objectStore.get(key)

      request.onsuccess = function (event) {
        resolve(request.result)
      }

      request.onerror = function (event) {
        reject('Error getting data: ' + event.target.errorCode)
      }
    })
  }
  closeDatabase() {
    this._db.close()
    console.log('Database connection closed')
  }
}

2、使用示例

import { Database  } from './database '
const myDB = Database({ dbName: 'myDatabase' })
// 示例数据
var myArray = [1, 2, 3, 4, 5];

// 将数组存储为一个对象
var dataObject = {
    id: 1,
    arrayData: myArray
};

// 添加数据到数据库
myDB.openDatabase()
    .then(() => {
        return myDB.addData("arrays", dataObject);
    })
    .then(() => {
        console.log("Array data added successfully");
    })
    .catch((error) => {
        console.error(error);
    })