IndexedDB浏览器数据库介绍以及基本操作封装

学习阮一峰老师的IndexedDB入门教程
 IndexedDB_API
IDBKeyRange

情况介绍

项目要求离线功能，也就是说在不通网的情况下也可以进行登录以及支持数据的增删改查，这就要求说的数据都要存储在本地数据库，可以从本地获取数据，在存储的数据量较大的时候通过SessionStorage或者LocalStorage来进行存储是不合理的。现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。
而IndexedDB 是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 SessionStorage或者LocalStorage 所不具备的。所以选择IndexedDB。

IndexedDB 特点

1.键值对储存

IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以"键值对"的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。

2.异步

IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。

3.支持事务

IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。

4.同源限制

IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。

5.储存空间大

IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。

6.支持二进制储存

支持二进制储存。 IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）

IndexedDB 基本操作封装：

从数据库新建、数据插入、数据查询、数据删除、数据库关闭和删除等方面进行封装

一、打开 / 创建数据库

indexedDB.open()方法返回一个 IDBRequest 对象。这个对象通过三种事件error、success、upgradeneeded，处理打开数据库的操作结果。新建数据库与打开数据库是同一个操作。如果指定的数据库不存在，就会新建。不同之处在于，后续的操作主要在upgradeneeded事件的监听函数里面完成，因为这时版本从无到有，所以会触发这个事件。

/**
 * @param {object} dbName 数据库的名字
 * @param {string} storeName 仓库（表）名称
 * @param {object} indexData 创建索引数据
 * @param {string} version 数据库的版本
 * @param {string} keyPathValue 主键
 * @return {object} 该函数会返回一个数据库实例
 */
Vue.prototype.handleOpenDB = (dbName, storeName, indexData, keyPathValue, version = 1) => {
  return new Promise((resolve, reject) => {
    //  兼容浏览器
    let 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 // 数据库对象
      storeData.forEach((item) => {
        let objectStore
        if (!db.objectStoreNames.contains(item.storeName)) { // 表格是否存在，如果不存在新建
          // eslint-disable-next-line standard/object-curly-even-spacing
          objectStore = db.createObjectStore(item.storeName, { keyPath: item.keyValue, autoIncrement: true}) // 创建表，keyPathValue为主键
          // 创建索引 可以让你搜索任意字段 IDBObject.createIndex()的三个参数分别为索引名称、索引所在的属性、配置对象（说明该属性是否包含重复的值）。
          item.storeIndexData.forEach((store) => {
            if (store) objectStore.createIndex(store.filedName, store.filedName, { unique: store.unique })
          })
        } else { // 表格存在，需要新增索引
          objectStore = event.target.transaction.objectStore(item.storeName)
          let indexNames = objectStore.indexNames
          item.storeIndexData.forEach((store) => {
            if (!indexNames.contains(store.filedName)) {
              objectStore.createIndex(store.filedName, store.filedName, { unique: store.unique })
            }
          })
        }
      })
    }
  })
}

二、数据新增和更新（支持批量）

写入数据需要新建一个事务。新建时必须指定表格名称和操作模式（"只读"或"读写"）。新建事务以后，通过IDBTransaction.objectStore(name)方法，拿到 IDBObjectStore 对象，再通过表格对象的add()/put()方法，向表格写入记录。

/**
 * 新增数据(添加数据，重复添加会报错)
 * @param {object} db 数据库实例
 * @param {string} storeName 仓库名称
 * @param {string} data 存储数据
 * @param {string} readWriteType 数据库读写类型
 */
Vue.prototype.handleAddData = (db, storeName, data, readWriteType = 'readwrite') => {
  let store = db.transaction([storeName], readWriteType) // 事务对象 指定表格名称和操作模式（"只读"或"读写"）
    .objectStore(storeName) // 仓库对象
  data.forEach((item, index) => {
    let request = store.add(data[index])
    request.onerror = function () {
      console.error('添加数据库中已有该数据')
    }
    request.onsuccess = function () {
      console.log('添加数据已存入数据库')
    }
  })
}

/**
 * 更新数据(重复数据更新，新的数据添加)
 * @param {object} db 数据库实例
 * @param {string} storeName 仓库名称
 * @param {object} data 数据
 * @param {string} readWriteType 数据库读写类型
 */
Vue.prototype.handleUpdateData = (db, storeName, data, readWriteType = 'readwrite') => {
  let store = db
    .transaction([storeName], readWriteType) // 事务对象
    .objectStore(storeName) // 仓库对象
  data.forEach((item, index) => {
    let request = store.put(data[index])
    request.onerror = function () {
      console.error('数据更新失败')
    }
    request.onsuccess = function () {
      console.log('数据更新成功')
    }
  })
}

三、数据读取

通过主键读取数据

 * 通过主键读取数据
 * @param {object} db 数据库实例
 * @param {string} storeName 仓库（表）名称
 * @param {string} key 主键值
 */
Vue.prototype.getDataByKey = (db, storeName, key) => {
  return new Promise((resolve, reject) => {
    var transaction = db.transaction([storeName]) // 事务
    var objectStore = transaction.objectStore(storeName) // 仓库对象
    var request = objectStore.get(key) // 参数key是主键
    request.onerror = function (event) {
      console.log('主键查询失败')
    }
    request.onsuccess = function (event) {
      console.log('主键查询结果: ', request.result)
      resolve(request.result)
    }
  })
}

通过游标读取仓库（表）内所有数据

/**
 * 通过游标读取仓库内所有数据
 * @param {object} db 数据库实例
 * @param {string} storeName 仓库（表）名称
* @param {string} readWriteType 数据库读写类型
 */
Vue.prototype.cursorGetData = (db, storeName, readWriteType = 'readwrite') => {
  return new Promise((resolve, reject) => {
    let allData = []
    let request = db
      .transaction(storeName, readWriteType) // 事务
      .objectStore(storeName) // 仓库对象
      .openCursor() // 指针对象
    request.onsuccess = function (e) {
      let cursor = e.target.result
      if (cursor) {
        allData.push(cursor.value)
        cursor.continue() // 遍历表内的所有内容
      } else {
        console.log('游标查询结果：', allData)
        resolve(allData)
      }
    }
  })
}

通过索引读取数据

索引的意义在于，可以让你搜索任意字段，也就是说从任意字段拿到数据记录。如果不建立索引，默认只能搜索主键（即从主键取值）。

/**
 * 通过索引读取数据
 * @param {object} db 数据库实例
 * @param {string} storeName 仓库（表）名称
 * @param {string} indexName 索引名称
 * @param {string} indexValue 索引值
* @param {string} readWriteType 数据库读写类型
 */
Vue.prototype.getDataByIndex = (db, storeName, indexName, indexValue, readWriteType = 'readwrite') => {
  return new Promise((resolve, reject) => {
    let request = db
      .transaction(storeName, readWriteType)
      .objectStore(storeName)
      .index(indexName)
      .get(indexValue)
    request.onerror = function () {
      console.log('事务失败')
    }
    request.onsuccess = function (e) {
      let result = e.target.result
      console.log('索引查询结果：', result)
      resolve(result)
    }
  })
}

过索引和游标查询指定范围数据

/**
 * 通过索引和游标查询指定范围数据（日期范围示例，查询indexName值t1到t2范围内的）
 * @param {object} db 数据库实例
 * @param {string} storeName 仓库名称
 * @param {string} indexName 索引名称
 * @param {number} t1 日期1
 * @param {number} t2 日期2
 * @param {string} readWriteType 数据库读写类型
 */
Vue.prototype.getDataByTimeRange = (db, storeName, indexName, t1, t2, readWriteType = 'readwrite') => {
  return new Promise((resolve, reject) => {
    let result = []
    let request = db
      .transaction(storeName, readWriteType) // 事务
      .objectStore(storeName) // 仓库对象
      .index(indexName)
      .openCursor(IDBKeyRange.bound(t1, t2))
    request.onsuccess = function (e) {
      let cursor = e.target.result
      if (cursor) {
        // 必须要检查
        result.push(cursor.value)
        cursor.continue() // 遍历了存储对象中的所有内容
      } else {
        console.log('范围查询结果：', result)
        resolve(result)
      }
    }
    request.onerror = function (event) {
      console.log('事务失败')
    }
  })
}

四、数据删除

删除主键对应的数据

/**
 * 删除主键对应的数据
 * @param {object} db 数据库实例
 * @param {string} storeName 仓库名称
 * @param {object} key 主键值
* @param {string} readWriteType 数据库读写类型
 */
Vue.prototype.handleDeleteByKey = (db, storeName, key, readWriteType = 'readwrite') => {
  let request = db
    .transaction([storeName], readWriteType)
    .objectStore(storeName)
    .delete(key) // 删除主键对应的记录

  request.onsuccess = function () {
    console.log('数据删除成功')
  }

  request.onerror = function () {
    console.log('数据删除失败')
  }
}

删除整张表的数据

/**
 * 删除整张表的数据
 * @param {object} db 数据库实例
 * @param {string} storeName 仓库名称
 * @param {string} readWriteType 数据库读写类型
 */
Vue.prototype.handleDeleteAll = (db, storeName, readWriteType = 'readwrite') => {
  let request = db
    .transaction([storeName], readWriteType)
    .objectStore(storeName)
    .clear() // 删除整张表记录

  request.onsuccess = function () {
    console.log('删除整张表的数据成功')
  }

  request.onerror = function () {
    console.log('删除整张表的数据失败')
  }
}

五、数据库的删除和关闭

删除数据库


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

关闭数据库

/**
 * 关闭数据库
 * @param {object} db 数据库实例
 */
Vue.prototype.handleCloseDB = (db) => {
  db.close()
  console.log('数据库已关闭')
}

IndexedDB浏览器数据库介绍以及基本操作封装

情况介绍

IndexedDB 特点

1.键值对储存

2.异步

3.支持事务

4.同源限制

5.储存空间大

6.支持二进制储存

IndexedDB 基本操作封装：

一、打开 / 创建数据库

二、数据新增和更新（支持批量）

三、数据读取

通过主键读取数据

通过游标读取仓库（表）内所有数据

通过索引读取数据

过索引和游标查询指定范围数据

四、数据删除

删除主键对应的数据

删除整张表的数据

五、数据库的删除和关闭

删除数据库

关闭数据库