vue使用indexedDB缓存教程

1.前端缓存几种方式: cookie、localStorage、sessionStorage、indexedDB,下面详细介绍indexedDB

2.完整代码

复制代码
class DBManager {
  dbName: any = null;
  version: any = null;
  db: any = null;

  /**
   * 初始化数据库名、版本
   * @param dbName
   * @param version
   */
  constructor(dbName: String, version: String | Number) {
    this.dbName = dbName;
    this.version = version;
    this.db = null;
  }

  /**
   * 打开数据库
   * @param callback
   * @returns
   */
  openDB(storeName?: String, keyPath?: String, keys?: Array<any>) {
    return new Promise((resolve, reject) => {
      if (this.db) {
        resolve(this.db);
      } else {
        const cmd = indexedDB.open(this.dbName, this.version);
        cmd.onsuccess = (e: any) => {
          this.db = e.target.result;
          resolve(this.db);
        };
        cmd.onerror = (e: any) => {
          reject(e.target.error);
        };
        cmd.onupgradeneeded = (e: any) => {
          this.createStore(storeName, keyPath, keys);
        };
      }
    });
  }

  /**
   * 关闭数据库
   */
  closeDB() {
    if (this.db) {
      this.db.close();
      this.db = null;
    }
  }

  /**
   * 删除数据库
   * @returns
   */
  deleteDB() {
    return new Promise((resolve, reject) => {
      const cmd = indexedDB.deleteDatabase(this.dbName);
      cmd.onsuccess = (e: any) => {
        resolve("");
      };
      cmd.onerror = (e: any) => {
        reject(e.target.error);
      };
    });
  }

  /**
   * 创建对象仓库
   * @param storeName
   * @param keyPath
   * @param keys
   * @returns
   */
  createStore(storeName?: String, keyPath?: String, keys?: Array<any>) {
    return new Promise(async (resolve, reject) => {
      if (this.db) {
        const store = this.db.createObjectStore(storeName, {
          keyPath: keyPath,
          autoIncrement: true,
        });
        if (keys) {
          keys.forEach((key: any) => {
            store.createIndex(key, key, { unique: key === keyPath ? true : false });
          });
        }
        resolve(this.db);
      } else {
        reject("数据库未打开createStore");
      }
    });
  }

  /**
   * 增加数据
   * @param storeName
   * @param data
   * @returns
   */
  insert(storeName: String, data: any) {
    return new Promise((resolve, reject) => {
      if (this.db) {
        const transaction = this.db.transaction(storeName, "readwrite");
        const store = transaction.objectStore(storeName);
        const cmd = store.add(data);
        cmd.onsuccess = (e: any) => {
          resolve(e.target.result);
        };
        cmd.onerror = (e: any) => {
          reject(e.target.error);
        };
      } else {
        reject("数据库未打开");
      }
    });
  }

  /**
   * 查询数据,默认根据主键查询
   * @param storeName
   * @param value
   * @returns
   */
  queryByKey(storeName: String, value: any) {
    return new Promise((resolve, reject) => {
      if (this.db) {
        const transaction = this.db.transaction(storeName, "readonly");
        const store = transaction.objectStore(storeName);
        const cmd = store.get(value);
        cmd.onsuccess = (e: any) => {
          resolve(e.target.result);
        };
        cmd.onerror = (e: any) => {
          reject(e.target.error);
        };
      } else {
        reject("数据库未打开");
      }
    });
  }

  /**
   * 查询全部数据记录
   * @param storeName
   * @returns
   */
  queryAll(storeName: String) {
    return new Promise((resolve, reject) => {
      if (this.db) {
        const transaction = this.db.transaction(storeName, "readonly");
        const store = transaction.objectStore(storeName);
        const cmd = store.getAll();
        cmd.onsuccess = (e: any) => {
          resolve(e.target.result);
        };
        cmd.onerror = (e: any) => {
          reject(e.target.error);
        };
      } else {
        reject("数据库未打开");
      }
    });
  }

  /**
   * 通过游标查询,跟queryByIndex的区别是:游标查询可定义查询条件,比如年龄在18-24之间的数据
   * @param storeName
   * @param range 查询条件
   * @param direction 排序顺序
   * @returns
   */
  queryByCursor(storeName: String, key?: String, range?: any, direction: String = "next") {
    return new Promise((resolve, reject) => {
      if (this.db) {
        const transaction = this.db.transaction(storeName, "readonly");
        const store = transaction.objectStore(storeName);
        const index = key ? store.index(key) : "";
        const cursor = range ? index.openCursor(range, direction) : store.openCursor();
        const result: Array<any> = [];
        cursor.onsuccess = (e: any) => {
          const cursor = e.target.result;
          if (cursor) {
            result.push(cursor.value);
            cursor.continue();
          }
          resolve(result);
        };
        cursor.onerror = (e: any) => {
          reject(e.target.error);
        };
      } else {
        reject("数据库未打开");
      }
    });
  }

  /**
   * 通过键值对查询
   * @param storeName
   * @param indexName
   * @param value
   * @returns 获取:键为indexName,值为value 的那条数据
   */
  queryByIndex(storeName: String, indexName: String, value: any) {
    return new Promise((resolve, reject) => {
      if (this.db) {
        const transaction = this.db.transaction(storeName, "readonly");
        const store = transaction.objectStore(storeName);
        const cmd = store.index(indexName).get(value);
        cmd.onsuccess = (e: any) => {
          resolve(e.target.result);
        };
        cmd.onerror = (e: any) => {
          reject(e.target.error);
        };
      } else {
        reject("数据库未打开");
      }
    });
  }

  /**
   * 更新数据
   * @param storeName
   * @param key
   * @param data
   * @returns
   */
  update(storeName: String, key: String, newData: any) {
    return new Promise((resolve, reject) => {
      if (this.db) {
        const transaction = this.db.transaction(storeName, "readwrite");
        const store = transaction.objectStore(storeName);
        const cmd = store.get(key);
        cmd.onsuccess = (e: any) => {
          let data = e.target.result;
          Object.assign(data, newData);
          const requestUpdate = store.put(data);
          requestUpdate.onsuccess = (e: any) => {
            resolve(e.target.result);
          };
          requestUpdate.onerror = (e: any) => {
            reject(e.target.error);
          };
        };
        cmd.onerror = (e: any) => {
          reject(e.target.error);
        };
      } else {
        reject("数据库未打开");
      }
    });
  }

  /**
   * 删除数据
   * @param storeName
   * @param key
   * @returns
   */
  delete(storeName: String, key: String) {
    return new Promise((resolve, reject) => {
      if (this.db) {
        const transaction = this.db.transaction(storeName, "readwrite");
        const store = transaction.objectStore(storeName);
        const cmd = store.delete(key);
        cmd.onsuccess = (e: any) => {
          resolve(e.target.result);
        };
        cmd.onerror = (e: any) => {
          reject(e.target.error);
        };
      } else {
        reject("数据库未打开");
      }
    });
  }
}
export default DBManager;

3.在项目中使用

复制代码
template:
    <button @click="learnDb('open')">打开</button>
    <button @click="learnDb('add')">添加</button>
    <button @click="learnDb('search')">查询</button>
    <button @click="learnDb('delete')">删除</button>
    <button @click="learnDb('update')">更新</button>
    <button @click="learnDb('close')">关闭</button>
    <button @click="learnDb('clearn')">清除</button>


script:
    //学习indexedDB
let myDB = new DBManager("zhengjie", 1);
let learnDb = async (type: String) => {
  if (type == "clearn") {
    myDB.deleteDB();
  } else if (type == "open") {
    myDB.openDB("users", "name", ["name", "age"]);
  } else if (type == "add") {
    myDB.insert("users", { name: "整洁", age: 18 });
  } else if (type == "search") {
    // let a = await myDB.queryByKey("users", "整洁");
    // let a = await myDB.queryAll("users");
    // const range = IDBKeyRange.only(24);
    // let a = await myDB.queryByCursor("users", "age", range); //查询名字(name)为整洁的数据
    let a = await myDB.queryByIndex("users", "age", 24);
    console.log("查找数据", a);
  } else if (type == "delete") {
    myDB.delete("users", "整洁");
  } else if (type == "update") {
    myDB.update("users", "整洁", { name: "整洁", age: 24 });
  } else if (type == "close") {
    myDB.closeDB();
  }
};
相关推荐
前端(从入门到入土)3 分钟前
前端请求后端服务403(Invalid CORS request)
前端
大猩猩X16 分钟前
vxe-upload vue 实现附件上传、手动批量上传附件的方式
vue.js·vxe-ui
奈斯ing25 分钟前
【Redis篇】数据库架构演进中Redis缓存的技术必然性—高并发场景下穿透、击穿、雪崩的体系化解决方案
运维·redis·缓存·数据库架构
蓝天白云下遛狗29 分钟前
goole chrome变更默认搜索引擎为百度
前端·chrome
come112341 小时前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
musk12122 小时前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
万少2 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL3 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl023 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang3 小时前
前端如何实现电子签名
前端·javascript·html5