IndexedDB 初步使用

// 定義類
export default class CacheManager {
  constructor(dbName = 'name', tableName = 'table') {
    this.init(dbName, tableName);
  }

  init(dbName = 'iotServer', tableName = 'pageData') {
    return new Promise((resolve, reject) => {
      this.indexedDB =
        window.indexedDB ||
        window.webkitIndexedDB ||
        window.mozIndexedDB ||
        window.msIndexedDB;
      this.IDBOpenDBRequest = this.indexedDB.open(dbName);
      this.db = undefined;
      this.tableName = tableName;
      this.IDBOpenDBRequest.onsuccess = (e) => {
        this.db = e.target.result;
        resolve();
      };
      this.IDBOpenDBRequest.onupgradeneeded = (e) => {
        this.db = e.target.result;
        if (!this.db.objectStoreNames.contains(this.tableName)) {
          // objectStore就相當于數(shù)據(jù)庫中的一張表。IDBObjectStore類型。
          this.objectStore = this.db.createObjectStore(this.tableName, {
            keyPath: 'id',
            autoIncrement: false
          });
        }
        resolve();
      };
    });
  }

  addValue(key, value) {
    return new Promise((resolve, reject) => {
      const request = this.db?.transaction([this.tableName], 'readwrite').objectStore(this.tableName).add({
        id: key,
        ...value
      });
      request.onsuccess = (e) => {
        resolve(e.target.result);
      };
      request.onerror = (e) => {
        reject(e.target.error);
      };
    });
  }

  updateValue(key, value) {
    return new Promise((resolve, reject) => {
      const request = this.db?.transaction([this.tableName], 'readwrite').objectStore(this.tableName).put({
        id: key,
        ...value
      });
      request.onsuccess = (e) => {
        resolve();
      };
      request.onerror = (e) => {
        reject(e);
      };
    });
  }

  getValue(key) {
    return new Promise((resolve, reject) => {
      const request = this.db?.transaction([this.tableName], 'readonly').objectStore(this.tableName).get(key);
      request.onsuccess = (e) => {
        resolve(request.result);
      };
      request.onerror = (e) => {
        reject(e);
      };
    });
  }
}
// 使用
let cacheManager = new CacheManager()
await cacheManager.init()
await cacheManager.addValue(1, {name: 'alen'})
await cacheManager.getValue(1) // {id:1, name: 'alen'}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

  • 一.使用指導 1.indexedDB 數(shù)據(jù)庫類似于 NoSQL key-value 的風格實現(xiàn),原生支持儲存 JS...
    華爾街的主導曲閱讀 2,312評論 0 0
  • 問題 頁面如果表現(xiàn)不符合預期,前端工程師在沒有 javascript 日志的情況下,很難 debug。所以就需要針...
    唯泥Bernie閱讀 1,495評論 0 1
  • 基本概念 IndexedDB是一種在瀏覽器中持久存儲數(shù)據(jù)的方法,允許我們不考慮網(wǎng)絡可用性,創(chuàng)建具有豐富查詢能力的可...
    cc要堅定自己的腳步閱讀 5,566評論 0 1
  • 前言 最近在做的項目上有離線功能,需要將大量的數(shù)據(jù)存儲在前端。結(jié)合項目實際需求最后決定使用indexedDB來進行...
    雷銀閱讀 4,157評論 0 8
  • IndexedDB就是一個數(shù)據(jù)庫,它最大的特色是使用對象保存數(shù)據(jù),而不是使用表來保存數(shù)據(jù)。
    change_i閱讀 371評論 0 0

友情鏈接更多精彩內(nèi)容