前端使用indexedDB,实现保存本地操作日志

362 阅读1分钟
 indexed_db.js 
 let dbName = 'logs'; // 数据库名
 let dbResult; // 数据库数据结果  
 let arr = ['url', 'params', 'funReturn', 'fun', 'order', 'date'] // 数据库需保存的字段 
 // 创建数据库 
 createDB(arr) {
   let version = 1; // 数据库版本号
   // 打开数据库,如果数据库不存在则创建数据库
   let dbRequest = window.indexedDB.open(dbName, version);
   // 打开失败
   dbRequest.oneroor = (res) => {
     console.log('打开数据库失败', res);
   }
   // 打开成功
   dbRequest.onsuccess = (res) => {
     dbResult = dbRequest.result;     console.log('打开数据库成功', res);
   }
   // 创建数据库
   dbRequest.onupgradeneeded = (event) => {
     dbResult = event.target['result'];
     dbResult.onerror = function (event) {
       console.log('数据库打开失败');
     };
     // 创建一个数据库存储对象
     var objectStore = this.db.createObjectStore(dbName, {
       keyPath: 'id',
       autoIncrement: true // 自动递增
     });
     // 定义存储对象的数据项
     objectStore.createIndex('id', 'id', {
       unique: true // 独以无二的
     });
     for (let i = 0; i < arr.length; i++) {
       objectStore.createIndex(arr[i], arr[i]);
     }
   }
 }
 // 新增数据
 add(params: any) {
   let transaction = dbResult.transaction([dbName], "readwrite");   // 打开已经存储的数据对象
   var objectStore = transaction.objectStore(dbName);   // 添加到数据对象中
   var objectStoreRequest = objectStore.add(params);
   objectStoreRequest.onsuccess = function (event) {
     console.log('添加成功')
     console.log(params);
   }
 }
 // 查询数据
 check() {
   let data = []; // 存储的数据
   // 打开对象存储,获得游标列表
   var objectStore = dbResult.transaction(dbName).objectStore(dbName);
   objectStore.openCursor().onsuccess = (event) => {
     var cursor = event.target.result;
     // 如果游标没有遍历完,继续下面的逻辑
     if (cursor) {
       data.push(cursor.value) // 存储的值进去
       // 继续下一个游标项
       cursor.continue();
     } else {
 // 如果全部遍历完毕输出结果
       console.log('查询结果:', data)
     }
   }
 }
 //删除存储空间全部数据
 clear() {
   let store = dbResult.transaction(dbName, 'readwrite').objectStore(dbName);
   store.clear();
   console.log('已删除存储空间' + dbName + '全部记录');
 }
 // 调用方法
 test() {
  let time = new Date();
  let { ...logData } = {
    url: '接口地址',
    params: `传入参数`,
    funReturn:  `接口返回`,
    fun: `操作类型`, 
    date: "时间:" + time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate() + ":" + time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds(),
  };
  add(logData);
 }