手把手实现IndexedDB封装实现增删改查以及模糊查询方法

IndexedDB简介

相信你已经知道IndexedDB是做什么的了，相比Web SQL他的优势还是很明显的，首先他不是关系数据库，能够存储大量的结构化数据其次巴拉巴拉巴拉优点一大堆，在这里不是我们讨论的重点，就目前来看H5主流的存储就是LocalStorage,SessionStorage和IndexedDB。SessionStorage是临时保存数据，在你关闭窗口或删除标签就会删除，LocalStorage是可以永久缓存在浏览器里的，但是由于是键值对，他只能存储字符串类型，对于JSON数据需要转化，这里就不多说，后面会开个帖子单独说，而IndexedDB则是弥补了LocalStorage的许多不足，可以存储大量的复杂数据。当然大佬就不用往下看啦。

话不多说直接开始

由于IndexedDB属于前端数据库，所以他也有一系列的数据库操作包括创建，打开，增删改查等操作。在此，我是基于Vue框架进行的封装，亲测可用！！！！！

第一步 创建数据库

由于我想多组件使用该数据，所以我单独将它写在一个js文件中。

// An highlighted block
function DB() {
   
  this.db = null;
  this.indexedDB =
    window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;

这里我通过构造函数的方法创建出DB这个对象，然后给他一个db属性初始值为null后面会存储数据库结果，并定义一个IDBOpenDBRequest对象indexedDB。

  this.openDB = (dbName, version, storeName) => {
   
    // let that = this;
    let vers = version || 1;
    // let indexedDB =
    //   window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;
    let request = this.indexedDB.open(dbName, vers); //打开数据库
    request.onsuccess = e => {
   
      this.db = e.target.result;
      console.log("数据库打开成功", e);
    };
      request.onerror = e => {
   
      console.log("数据库打开失败", e);
    }; //数据库打开失败

在这里我们定义一个openDB的方法用于创建数据库。由于我在外部调用这个方法所以给他传了三个值。dbName是数据库名，version是版本号（创建数据库必须有版本号，默认为1），storeName是新建对象仓库也就是数据库表名。indexedDB.open(dbName, version)用来创建数据库。然后通过onsuccess, onerror,onupgradeneeded来处理打开数据库后的操作结果。我们可将成功结果赋值给this.db.

 request.onupgradeneeded = e => {
   
      this.db = e.target.result;
      // console.log('db',db);
      if (!this.db.objectStoreNames.contains(storeName)) {
   
        let dbStore = this.db.createObjectStore(storeName, {
   
          keyPath: "infoId"
        });
        //创建索引(可以根据索引查询)
        dbStore.createIndex("name", "name", {
    unique: false });
        console.log("成功创建数据仓库", dbStore);
      }

这里是一个类似与回调函数upgradeneeded，他会在我们请求打开的数据库的版本号和已经存在的数据库版本号不一致的时候调用，当然第一次创建完也会走这个回调。我们一般会把创建表写在这里。判断是否表名已存在，然后通过createObjectStore(storName, { keyPath: " "})来创建表以及通过keyPath来设置主键。在这里我们也可以创建索引。通过表名来创建相应查询索引，如果不设置只能按主键来查找。在这里我们通过createIndex(“name”, “name”, { unique: false})其中第一个name是我们创建的索引名，第二个name是我们将name属性设为索引来进行查询。
这里由于我已经创建过了所以直接打开成功

第二步 增加数据

如果您已经按照上面操作成功创建了数据表那么我们就可以往表单里增添数据了。

//增加数据
  this.addData = (storeName, data) => {
   
    // openDB('info', 1, 'User');
    console.log(this.db);
    if (this.db != null) {
   
      //添加事务
      let transcation = this.db.transaction(storeName, "readwrite");
      let store = transcation.objectStore(storeName);