indexDB的应用

indexDB的应用*

在某些时候，作为前端开发的我们，会时常用浏览器缓存。比如sessionStorage,localStorage,cookies等，作为不常用的indexDB,在存储大量数据的情况下，可能会使用到，那么废话少说，上代码：

以下是封装好的，用的vue，vuex，基于做的IM产品封装 的，大佬不要喷…

import storeApp from '@/store/index.js'
const indexedDB = {
    /**
 * 打开数据库
 * @param {object} dbName 数据库的名字
 * @param {string} storeName 仓库名称
 * @param {string} version 数据库的版本
 * @return {object} 该函数会返回一个数据库实例
 */ 
    handleOpenDB(dbName, storeName, version = 5) {
        return new Promise((resolve, reject) => {
          //  兼容浏览器
          var indexedDB = window.indexedDB || window.mozIndexedDB ||  window.webkitIndexedDB || window.msIndexedDB;
          let db;
          const request = indexedDB.open(dbName, version);
          request.onsuccess = function(event) {
            db = event.target.result; // 数据库对象
            resolve(db);
          };
          request.onerror = function(event) {
            reject(event)
          };
          request.onupgradeneeded = function(event) {
            // 数据库创建或升级的时候会触发
            db = event.target.result; // 数据库对象
            var objectStore;
            if (!db.objectStoreNames.contains(storeName)) {
              objectStore = db.createObjectStore(storeName, { keyPath: "timestamp" }); // 创建表
              objectStore.createIndex("body", "body", { unique: false }); // 创建索引 可以让你搜索任意字段
              objectStore.createIndex("conversation", "conversation", {unique: false });
              objectStore.createIndex("from", "from", { unique: false });
              objectStore.createIndex("heartResponse", "heartResponse", { unique: false });
              objectStore.createIndex("host", "host", { unique: false });
              objectStore.createIndex("msgId", "msgId", { unique: false });
              objectStore.createIndex("msgType", "msgType", { unique: false });
              objectStore.createIndex("noticeType", "noticeType", { unique: false });
              objectStore.createIndex("ope", "ope", { unique: false });
              objectStore.createIndex("port", "port", { unique: false });
              objectStore.createIndex("serverSend", "serverSend", { unique: false });
              objectStore.createIndex("times", "times", { unique: false });
              objectStore.createIndex("to", "to", { unique: false });
              objectStore.createIndex("token", "token", { unique: false });
              objectStore.createIndex("chatId", "chatId", { unique: false });
              objectStore.createIndex("sendMsgId", "sendMsgId", { unique: false });
            }
          };
        });
    },
    /**
   * 新增数据
   * @param {object} db 数据库实例
   * @param {string} storeName 仓库名称
   * @param {string} data 数据
   */
    handleAddData(db,storeName, data) {
     db.then(res=>{
      let db = res;
      var request =  db.transaction([storeName],"readwrite") // 事务对象 指定表格名称和操作模式（"只读"或"读写"）
          .objectStore(storeName) // 仓库对象
          .add(data);
        request.onsuccess = function(event) {
          console.log("数据写入成功",event);
        };
        request.onerror = function(event) {
          console.log("数据写入失败");
          throw new Error(event.target.error);
        };
      })
       
    },
    /**
   * 通过主键读取数据
   * @param {object} db 数据库实例
   * @param {string} storeName 仓库名称
   * @param {string} key 主键值
   */
  getDataByKey(db, storeName, key) {
    return new Promise((resolve, reject) => {
        console.log(reject)
      var transaction = db.transaction([storeName]); // 事务
      var objectStore = transaction.objectStore(storeName); // 仓库对象
      var request = objectStore.get(key);
  
      request.onerror = function(event) {
        console.log("事务失败",event);
      };
  
      request.onsuccess = function(event) {
        console.log("主键查询结果: ", request.result,event);
        resolve(request.result);
      };
    });
  },
 /**
   * 通过游标读取数据
   * @param {object} db 数据库实例
   * @param {string} storeName 仓库名称
   */
 cursorGetData(db, storeName) {
    let list = [];
    var store = db
      .transaction(storeName, "readwrite") // 事务
      .objectStore(storeName); // 仓库对象
    var request = store.openCursor(); // 指针对象
    request.onsuccess = function(e) {
      var cursor = e.target.result;
      if (cursor) {
        // 必须要检查
        list.push(cursor.value);
        cursor.continue(); // 遍历了存储对象中的所有内容
      } else {
        console.log("游标查询结果：", list);
      }
    };
  },
   /**
   * 通过索引读取数据
   * @param {object} db 数据库实例
   * @param {string} storeName 仓库名称
   * @param {string} indexName 索引名称
   * @param {string} indexValue 索引值
   */
getDataByIndex(db, storeName, indexName, indexValue) {
        db.then(res=>{
          let db = res;
          var store = db.transaction(storeName, "readwrite").objectStore(storeName);
          var request = store.index(indexName).get(indexValue);
          request.onerror = function() {
            console.log("事务失败");
          };
          request.onsuccess = function(e) {
            var result = e.target.result;
            console.log('result',result)
          };
        })
       
},
/**
   * 通过索引和游标查询记录
   * @param {object} db 数据库实例
   * @param {string} storeName 仓库名称
   * @param {string} indexName 索引名称
   * @param {string} indexValue 索引值
   */
cursorGetDataByIndex(db, storeName, indexName, indexValue) {
    db.then(res=>{
      let db = res;
      var store = db.transaction(storeName, "readwrite").objectStore(storeName); // 仓库对象
      var request = store .index(indexName).openCursor(IDBKeyRange.only(indexValue)); // indexValue指针对象 --- // indexName索引对象
      request.onsuccess = function(e) {
        var cursor = e.target.result;
        if (cursor) {
          // 必须要检查
          storeApp.commit('setImMessageList',cursor.value);
          cursor.continue(); // 遍历了存储对象中的所有内容
        } 
      };
      request.onerror = function(e) {
          console.log('e',e)
      };
    })
 
},
  
  /**
   * 更新数据
   * @param {object} db 数据库实例
   * @param {string} storeName 仓库名称
   * @param {object} data 数据
   */
handleUpdate(db, storeName, data) {
    var request = db.transaction([storeName], "readwrite") // 事务对象
      .objectStore(storeName) // 仓库对象
      .put(data);
    request.onsuccess = function() {
      console.log("数据更新成功");
    };
  
    request.onerror = function() {
      console.log("数据更新失败");
    };
  },
  /**
   * 删除数据
   * @param {object} db 数据库实例
   * @param {string} storeName 仓库名称
   * @param {object} id 主键值
   */
 handleDelete(db, storeName, id) {
    var request = db.transaction([storeName], "readwrite").objectStore(storeName).delete(id);
    request.onsuccess = function() {
      console.log("数据删除成功");
    };
  
    request.onerror = function() {
      console.log("数据删除失败");
    };
  },
  /**
   * 通过索引和游标删除指定的数据
   * @param {object} db 数据库实例
   * @param {string} storeName 仓库名称
   * @param {string} indexName 索引名
   * @param {object} indexValue 索引值
   */
  handleCursorDelete(db, storeName, indexName, indexValue) {
    var store = db.transaction(storeName, "readwrite").objectStore(storeName);
    var request = store
      .index(indexName) // 索引对象
      .openCursor(IDBKeyRange.only(indexValue)); // 指针对象
    request.onsuccess = function(e) {
      var cursor = e.target.result;
      var deleteRequest;
      if (cursor) {
        deleteRequest = cursor.delete(); // 请求删除当前项
        deleteRequest.onerror = function() {
          console.log("游标删除该记录失败");
        };
        deleteRequest.onsuccess = function() {
          console.log("游标删除该记录成功");
        };
        cursor.continue();
      }
    };
    request.onerror = function(e) {
        console.log('e',e)
    };
  },
   /**
   * 关闭数据库
   * @param {object} db 数据库实例
   */
   handleCloseDB(db) {
        db.close();
        console.log("数据库已关闭");
   },
   
  /**
   * 删除数据库
   * @param {object} dbName 数据库名称
   */
   handleDeleteDB(dbName) {
    let deleteRequest = window.indexedDB.deleteDatabase(dbName);
    deleteRequest.onerror = function(event) {
      console.log("删除失败",event);
    };
    deleteRequest.onsuccess = function(event) {
      console.log("删除成功",event);
    };
  }
      
    
}
 export default indexedDB