indexDB 浏览器存储使用

　引入封装的js文件 localIndexDB.js

//indexDB 本地数据存储
import indexDb from './assets/js/indexDb';
// index:索引、name:表名、key:主键
let storeName = {
  index: ['tableView'],
  name: 'tableView',
  key: 'menuid'
};
indexDb.openDB('qms_client', 1, storeName, function (db) {
  Vue.prototype.$tableDb = db //全局保存数据库
});
Vue.prototype.$indexDb = indexDb;

//设置$indexDbDefault默认
Vue.prototype.$indexDbDefault = {
  getData(menuid){
    return new Promise(async (resolve, reject) => {
      let hasData = await _Vue.$indexDb.getData(_Vue.$tableDb, 'tableView', menuid);
      if (hasData) {
        resolve(hasData);
      } else {
        resolve('');
        console.log("未获取到基准书导入数据");
      }
    })
  },
  async setData(menuid,data){
    let hasData = await this.getData(menuid);
    // console.log(hasData);
    if (hasData) {
      _Vue.$indexDb.updateData(_Vue.$tableDb, 'tableView', [{
        menuid: menuid,
        ...data,
      }]);
    } else {
      _Vue.$indexDb.addData(_Vue.$tableDb, 'tableView', [{
        menuid: menuid,
        ...data,
      }]);
    }
  },
};

使用方法

this.$indexDbDefault.setData(1,{data:data});

let getData = await this.$indexDbDefault.getData(1);//获取该供应商已经保存过的数据

indexDb.js文件

//indexDb 本地存储使用

export default {
  // indexedDB兼容
  indexedDB: window.indexedDB || window.webkitindexedDB || window.msIndexedDB || window.mozIndexedDB,
  /**
   * 打开数据库
   * 新对象储存空间newStore参数：newStore.name、newStore.key
   * 新增对象存储空间要更改数据库版本
   * @param {数据库名称} dbname
   * @param {版本} version
   * @param {数据库} db
   * @param {配置} newStore
   * @param {回调函数} callback
   */
  openDB(dbname, version, newStore, callback) {
    let db
    version = version || 1;
    const request = this.indexedDB.open(dbname, version);
    request.onerror = function () {
      console.log('IndexedDB数据库打开错误');
    };
    request.onsuccess = function (event) {
      db = event.target.result;
      if (callback && (typeof callback === 'function')) {
        callback(db);
      }
    };
    // onupgradeneeded，调用创建新的储存空间
    request.onupgradeneeded = function (event) {
      db = event.target.result;
      if (newStore) {
        if (!db.objectStoreNames.contains(newStore.name)) {
          const objectStore = db.createObjectStore(newStore.name, {
            keyPath: newStore.key,
          });
          newStore.index.forEach(item => {
            objectStore.createIndex(item + '_index', item, {
              unique: false
            });
          })
        }
      }
    };
  },
  addData(db, storename, list) {
    // console.log(db)
    // console.log(storename)
    // console.log(list)
    const store = db.transaction(storename, 'readwrite').objectStore(storename);
    list.forEach(ls => {
      const request = store.add(ls);
      request.onsuccess = function () {
        console.log('数据写入成功');
      };
      request.onerror = function () {
        console.log('数据写入失败');
      }
    })
  },
  updateData(db, storename, list) {
    const store = db.transaction(storename, 'readwrite').objectStore(storename);
    list.forEach(ls => {
      const request = store.put(ls);
      request.onsuccess = function () {
        console.log('数据更新成功');
      };
      request.onerror = function () {
        console.log('数据更新失败');
      }
    })
  },
  getData(db, storeName, key){
    var objectStore = db.transaction(storeName).objectStore(storeName);
    var request = objectStore.get(key);
    request.onerror = function(event) {
      console.log('事务失败');
    };
    return new Promise((resolve, reject) => {
      request.onsuccess = function (e) {
        resolve(e.target.result)
      }
    })
  },
  getAllData(db, storeName) {
    const objectStore = db.transaction(storeName).objectStore(storeName);
    const request = objectStore.openCursor();

    let data = [];
    return new Promise((resolve, reject) => {
      request.onsuccess = function (e) {
        var cursor = e.target.result;
        if (cursor) {
          data.push(cursor.value);
          cursor.continue();
        } else {
          resolve(data)
        }
      }
    })
  },
}