IndexedDB-浏览器数据库存储基本封装

IndexedDB 介绍

IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。
IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。

本文仅对 IndexedDB 的常用方法进行封装说明，可以帮助你快速实现一下功能：

• 打开 / 创建 Indexed 数据库
• 新增数据
• 通过主键读取数据
• 通过游标读取数据
• 通过索引读取数据
• 通过索引和游标查询记录
• 更新数据
• 删除数据
• 通过索引和游标删除指定的数据
• 关闭数据库
• 删除数据库

了解更多关于 IndexedDB，请前往阮一峰老师的IndexedDB入门教程

IndexedDB 基本封装

/**
 * 打开数据库
 * @param {object} dbName 数据库的名字
 * @param {string} storeName 仓库名称
 * @param {string} version 数据库的版本
 * @return {object} 该函数会返回一个数据库实例
 */
export function handleOpenDB(dbName, storeName, version = 1) {
  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; // 数据库对象
      console.log("数据库打开成功");
      resolve(db);
    };

    request.onerror = function(event) {
      console.log("数据库打开报错");
    };

    request.onupgradeneeded = function(event) {
      // 数据库创建或升级的时候会触发
      console.log("onupgradeneeded");
      db = event.target.result; // 数据库对象
      var objectStore;
      if (!db.objectStoreNames.contains(storeName)) {
        objectStore = db.createObjectStore(storeName, { keyPath: "id" }); // 创建表
        // objectStore = db.createObjectStore('person', { autoIncrement: true }) // 创建表
        objectStore.createIndex("name", "name", { unique: false }); // 创建索引 可以让你搜索任意字段
        objectStore.createIndex("address", "address", { unique: false });
        objectStore.createIndex("nameAddr", ["name", "address"], {
          unique: false
        });
        objectStore.createIndex("flag", "flag", { unique: false });
      }
    };
  });
}

/**
 * 新增数据
 * @param {object} db 数据库实例
 * @param {string} storeName 仓库名称
 * @param {string} data 数据
 */
export function handleAddData(db, storeName, data) {
  var request = db
    .transaction([storeName], "readwrite") // 事务对象 指定表格名称和操作模式（"只读"或"读写"）
    .objectStore(storeName) // 仓库对象
    .add(data);

  request.onsuccess = function(event) {
    console.log("数据写入成功");
  };

  request.onerror = function(event) {
    console.log("数据写入失败");
    throw new Error(event.target.error);
  };
}

/**
 * 通过主键读取数据
 * @param {object} db 数据库实例
 * @param {string} storeName 仓库名称
 * @param {string} key 主键值
 */
export function getDataByKey(db, storeName, key) {
  return new Promise((resolve, reject) => {
    var transaction = db.transaction([storeName]); // 事务
    var objectStore = transaction.objectStore(storeName); // 仓库对象
    var request = objectStore.get(key);

    request.onerror = function(event) {
      console.log("事务失败");
    };

    request.onsuccess = function(event) {
      console.log("主键查询结果: ", request.result);
      resolve(request.result);
    };
  });
}

/**
 * 通过游标读取数据
 * @param {object} db 数据库实例
 * @param {string} storeName 仓库名称
 */
export function 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 索引值
 */
export function getDataByIndex(db, storeName, indexName, indexValue) {
  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);
  };
}

/**
 * 通过索引和游标查询记录
 * @param {object} db 数据库实例
 * @param {string} storeName 仓库名称
 * @param {string} indexName 索引名称
 * @param {string} indexValue 索引值
 */
export function cursorGetDataByIndex(db, storeName, indexName, indexValue) {
  let list = [];
  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;
    if (cursor) {
      // 必须要检查
      list.push(cursor.value);
      cursor.continue(); // 遍历了存储对象中的所有内容
    } else {
      console.log("游标索引查询结果：", list);
    }
  };
  request.onerror = function(e) {};
}

/**
 * 更新数据
 * @param {object} db 数据库实例
 * @param {string} storeName 仓库名称
 * @param {object} data 数据
 */
export function 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 主键值
 */
export function 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 索引值
 */
export function 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) {};
}

/**
 * 关闭数据库
 * @param {object} db 数据库实例
 */
export function handleCloseDB(db) {
  db.close();
  console.log("数据库已关闭");
}

/**
 * 删除数据库
 * @param {object} dbName 数据库名称
 */
export function handleDeleteDB(dbName) {
  let deleteRequest = window.indexedDB.deleteDatabase(dbName);
  deleteRequest.onerror = function(event) {
    console.log("删除失败");
  };
  deleteRequest.onsuccess = function(event) {
    console.log("删除成功");
  };
}