自学内容网 自学内容网

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();
  }
};


原文地址:https://blog.csdn.net/m0_56104994/article/details/142496402

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!