浏览器IndexedDB数据库封装

export default class IndexedDBWrapper {
  constructor(databaseName, storeName, keyPath) {
    this.databaseName = databaseName;
    this.storeName = storeName;
    this.keyPath = keyPath;
    this.db = null;
  }

  // 打开 IndexedDB 数据库
  async open() {
    const request = window.indexedDB.open(this.databaseName, 1);

    request.onerror = (event) => {
      console.error('IndexedDB error:', event.target.error);
    };

    request.onupgradeneeded = (event) => {
      const db = event.target.result;
      const objectStore = db.createObjectStore(this.storeName, { keyPath: this.keyPath });
      //console.log(`${this.storeName} object store created.`);
    };

    return new Promise((resolve, reject) => {
      request.onsuccess = (event) => {
        this.db = event.target.result;
        //console.log(`${this.databaseName} database opened.`);
        resolve();
      };

      request.onerror = (event) => {
        console.error(`${this.databaseName} database error:`, event.target.error);
        reject(event.target.error);
      };
    });
  }

  // 关闭 IndexedDB 数据库
  close() {
    this.db.close();
    //console.log(`${this.databaseName} database closed.`);
  }

  // 写入数据
  async put(data) {
    const transaction = this.db.transaction(this.storeName, 'readwrite');
    const objectStore = transaction.objectStore(this.storeName);
    const request = objectStore.put(data);

    return new Promise((resolve, reject) => {
      request.onsuccess = (event) => {
        console.log(`Data written to ${this.storeName} object store.`);
        resolve();
      };

      request.onerror = (event) => {
        console.error(`Error writing data to ${this.storeName} object store:`, event.target.error);
        reject(event.target.error);
      };
    });
  }

  // 读取数据
  async get(key) {
    const transaction = this.db.transaction(this.storeName, 'readonly');
    const objectStore = transaction.objectStore(this.storeName);
    const request = objectStore.get(key);

    return new Promise((resolve, reject) => {
      request.onsuccess = (event) => {
        const data = event.target.result;
        //console.log(`Data read from ${this.storeName} object store.`);
        resolve(data);
      };

      request.onerror = (event) => {
        console.error(`Error reading data from ${this.storeName} object store:`, event.target.error);
        reject(event.target.error);
      };
    });
  }

  // 删除数据
  async delete(key) {
    const transaction = this.db.transaction(this.storeName, 'readwrite');
    const objectStore = transaction.objectStore(this.storeName);
    const request = objectStore.delete(key);

    return new Promise((resolve, reject) => {
      request.onsuccess = (event) => {
        //console.log(`Data deleted from ${this.storeName} object store.`);
        resolve();
      };

      request.onerror = (event) => {
        console.error(`Error deleting data from ${this.storeName} object store:`, event.target.error);
        reject(event.target.error);
      };
    });
  }

  // 获取所有数据
  async getAll() {
    const transaction = this.db.transaction(this.storeName, 'readonly');
    const objectStore = transaction.objectStore(this.storeName);
    const request = objectStore.getAll();

    return new Promise((resolve, reject) => {
      request.onsuccess = (event) => {
        const data = event.target.result;
        //console.log(`All data read from ${this.storeName} object store.`);
        resolve(data);
      };

      request.onerror = (event) => {
        console.error(`Error reading all data from ${this.storeName} object store:`, event.target.error);
        reject(event.target.error);
      };
    });
  }
}
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
IndexedDB浏览器提供的本地数据库,可以在浏览器中存储结构化数据。下面是 IndexedDB 的基本使用方法: 1. 打开数据库 使用 `indexedDB` 对象的 `open()` 方法打开数据库,如下所示: ``` let request = indexedDB.open('myDB', 1); ``` 其中,第一个参数是数据库名称,第二个参数是数据库版本号。如果数据库不存在,则会创建一个新的数据库。 2. 创建对象仓库 在成功打开数据库的回调方法 `request.onsuccess` 中,可以获取到数据库对象 `event.target.result`,然后使用它的 `createObjectStore()` 方法创建一个对象仓库(即数据表),如下所示: ``` let db = event.target.result; let objectStore = db.createObjectStore('people', { keyPath: 'id' }); ``` 其中,第一个参数是对象仓库的名称,第二个参数是一个对象,包含一个 keyPath 属性和其他可选属性。keyPath 用来指定数据表中的主键。 3. 添加数据 使用事务 `db.transaction()` 开启一个事务,然后使用 `add()` 方法向数据表中添加数据,如下所示: ``` let transaction = db.transaction(['people'], 'readwrite'); let objectStore = transaction.objectStore('people'); let request = objectStore.add({ id: 1, name: 'John Doe' }); ``` 其中,第一个参数是一个数组,包含要访问的对象仓库的名称,第二个参数是事务类型,可以是 'readonly' 或 'readwrite'。`add()` 方法的参数是要添加的数据。 4. 查询数据 使用事务 `db.transaction()` 开启一个事务,然后使用 `get()` 方法查询数据,如下所示: ``` let transaction = db.transaction(['people']); let objectStore = transaction.objectStore('people'); let request = objectStore.get(1); request.onsuccess = function(event) { console.log('Name: ' + event.target.result.name); }; ``` `get()` 方法的参数是要查询的数据的主键值。查询结果保存在 `request.onsuccess` 回调方法中的 `event.target.result` 中。 5. 更新数据 使用事务 `db.transaction()` 开启一个事务,然后使用 `put()` 方法更新数据,如下所示: ``` let transaction = db.transaction(['people'], 'readwrite'); let objectStore = transaction.objectStore('people'); let request = objectStore.put({ id: 1, name: 'Jane Doe' }); ``` `put()` 方法的参数是要更新的数据。 6. 删除数据 使用事务 `db.transaction()` 开启一个事务,然后使用 `delete()` 方法删除数据,如下所示: ``` let transaction = db.transaction(['people'], 'readwrite'); let objectStore = transaction.objectStore('people'); let request = objectStore.delete(1); ``` `delete()` 方法的参数是要删除的数据的主键值。 以上就是 IndexedDB 的基本使用方法。需要注意的是,IndexedDB 的 API 非常庞大,不仅仅包含上面提到的这些方法,还包括索引、游标、版本升级等功能。如果需要更详细的介绍和示例代码,可以参考 MDN 的文档:https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值