chrome vue IndexedDB 简单封装并使用

这个只是简单封装，注意：

• 一个数据库的表创建完，不允许修改字段；

• 可在同数据库下新增其他不同名表;

• keyList索引key。增加后可以直接看到该key的列，方便直接查看数据

• maxIndexStorageKey这个字段用于在缓存里存着要保存的条数，上线之后可以随时更改需要保存的条数

增加的数据库和表，需要在DBIndex变量手动修改

// 数据库
const DBIndex = [  {    DBName: "system",    //表名列表    formList: ["logs", "memory-watch"],
    //索引字段列表，下标等于表formList下标
    keyList: [      ["msg", "data"],
      ["rss", "heapUsed", "heapTotal", "external", "arrayBuffers"],
    ],
  },
];

封装(可以直接复制，然后使用）

// 创建数据库并添加,已创建的表不允许修改
// 注意，增加或修改表的时候，应该手动增加版本号,并且完善数据库信息
/* msg - 传入的数据
DBName - 数据库名
keyList - 索引表的字段,
maxIndexStorageKey // storage的最大缓存key,默认maxLengthKeyByIndexDB
*/
// indexedDBVersion - 数据库版本号，更新表字段需要更新版本号
const indexedDBVersion = 2;
// 数据库
const DBIndex = [
  {
    DBName: "system",
    //表名列表
    formList: ["logs", "memory-watch"],
    //索引字段列表，下标等于表下标,time为自动添加字段
    keyList: [
      ["msg", "data"],
      ["rss", "heapUsed", "heapTotal", "external", "arrayBuffers"],
    ],
  },
];

export function createdIndexDb(msg, DBName = "test", formName = "test",maxIndexStorageKey="maxLengthKeyByIndexDB") {
  let request = window.indexedDB.open(DBName, indexedDBVersion);
  const dbObj = DBIndex.find((item) => item.DBName === DBName);
  if (!dbObj) return;
  const maxLength = localStorage.getItem(maxIndexStorageKey);
  if (!maxLength) {
    maxLength = 50;
    localStorage.setItem(maxIndexStorageKey, maxLength);
  }
  //版本更新时进入该回调。
  request.onupgradeneeded = function (event) {
    let db = event.target.result;
    const stores = db.objectStoreNames;
    dbObj.formList.map((dbFormName, dbFormIndex) => {
      // 判断表是否存在
      if (!stores.contains(dbFormName)) {
        let objectStore = db.createObjectStore(dbFormName, {
          keyPath: "id",
          autoIncrement: true,
        });
        objectStore.createIndex("time", "time", { unique: false });
        const keyList = dbObj.keyList;
        if (keyList && keyList[dbFormIndex].length) {
          keyList[dbFormIndex].map((key) => {
            objectStore.createIndex(key, key, { unique: false });
          });
        }
      }
    });
  };
  request.onsuccess = function (event) {
    let db = event.target.result;
    let transaction = db.transaction([formName], "readwrite");
    if (!transaction) return;
    let objectStore = transaction.objectStore(formName);
    if (!objectStore) return;
    let successReq = objectStore.getAll();
    if (!successReq) return;
    successReq.onsuccess = function (successEvent) {
      const day = new Date().toLocaleString();
      objectStore.add({ time: day, ...msg });
      const allDataLength = successReq.result.length;
      if (allDataLength >= maxLength) {
        objectStore.delete(successReq.result[0].id);
      }
    };
  };
}

使用

//封装使用
function useDB(data){
    createdIndexDb(data,"system", "memory-watch",'maxLogsLength');
}
//调用
useDB({
        rss:"1m",
        heapUsed:"1m",
        heapTotal:"1m",
        external:"1m",
        arrayBuffers:"1m",
    })