indexeddb-utils v1.0.21

说明

该依赖共提供了 11 个方法，用于对 indexedDB 前端数据库进行增删改查的 api，下面会对部分方法的使用进行演示

安装

npm install indexeddb-utils

引入

import {
  openDB,
  addData,
  getDataByKey,
  cursorGetData,
  getDataByIndex,
  cursorGetDataByIndex,
  cursorGetDataByIndexAndPage,
  updateDB,
  deleteDB,
  cursorDelete,
  closeDB,
  deleteDBAll,
} from 'indexeddb-utils'

api 说明

openDB（option）: 用于打开或新建一个 indexedDB 数据库，如果已经有这个数据库了，则是打开该数据库，如果没有该数据库，那么是新建一个数据库，调用之后返回数据库实例 db 。传入一个配置对象，对象属性为：

			{
				dbName = "", // 数据库名字
				storeName = "", // 仓库名称（可以理解为 mysql 里面的表名）
				version = 1, // 数据库的版本
				key = "", // 主键
				autoIncrement = false, // 主键是否自增
				index = [], // 索引
			}

addData(db, storeName, data)：新增数据，操作成功返回字符串 success ，传入三个参数：分别是数据库实例 db ，仓库名称 storeName，和需要存储的数据 data，数据 data 为一个对象，里面属性必须包含创建数据库时的 key 和 索引 index 的每一项。

getDataByKey(db, storeName, key)：通过主键读取数据，返回查询到的数据，传入三个参数：数据库实例 db ，仓库名称 storeName，和需要取出的数据主键 key。

cursorGetData(db, storeName)：通过游标读取数据，返回查询到的数据，仓库中的所有数据， 传入两个参数：数据库实例 db， 仓库名称 storeName 。

getDataByIndex(db, storeName, indexName, indexValue)：通过索引读取数据，返回查询到的数据，只返回查询到该索引的第一条数据，传入四个参数：数据库实例 db ， 仓库名称 storeName， 索引名称 indexName，索引值 indexValue。

cursorGetDataByIndex(db, storeName, indexName, indexValue)：通过索引和游标查询记录，传入的参数和 getDataByIndex 一样，返回查询到该索引的全部数据，查询速度相对于 getDataByIndex 更快。

cursorGetDataByIndexAndPage(db,storeName,indexName,indexValue,page,pageSize)：通过索引和游标分页查询记录，返回查询到的数据，传入六个参数：数据库实例 db ，仓库名称 storeName ，索引名称 indexName ，索引值 indexValue ，页码 page ，查询条数 pageSize 。

updateDB(db, storeName, data)：更新数据，根据 data 里面的主键进行更新，如果数据库中已经有这条数据了，则是更新，如果没有这条数据，则是添加，操作成功返回字符串 success，传入三个参数：数据库实例 db ，仓库名称 storeName ，数据 data。

deleteDB(db, storeName, id)：通过主键删除数据，操作成功返回字符串 success ，传入三个参数：数据库实例 db， 仓库名称 storeName， 主键值 id 。

cursorDelete(db, storeName, indexName, indexValue)：通过索引和游标删除指定的数据，操作成功返回字符串 success ，传入四个参数：数据库实例 db ， 仓库名称 storeName， 索引名称 indexName，索引值 indexValue。

closeDB(db)：关闭数据库，不是 promise 模式，无返回，传入一个参数：db 数据库实例。

deleteDBAll(dbName)：删除数据库，操作成功返回字符串 success ，传入一个参数：数据库名称 dbName 。

演示

创建一个数据库，数据库的名称为 npmtest，数据库中的仓库（数据表）为：npmstore，版本为：1，主键名为 onlytest，主键不自增，索引有一条数据名为 one，并向数据库中添加一条数据，通过 addData 添加数据时，主键必须是唯一的，也就是说数据库中不能存在相同的主键

const obj = {
  dbName: 'npmtest',
  storeName: 'npmstore',
  version: 1,
  key: 'onlytest',
  autoIncrement: false,
  index: ['one'],
}

openDB(obj).then(async (db) => {
  try {
    const res = await addData(db, obj.storeName, {
      onlytest: Date.now(),
      one: 'testData',
    })
    console.log(res, 'res') // 输出 success res
  } catch (error) {
    console.log(error, 'error')
  }
})

通过主键读取数据：

const obj = {
  dbName: 'npmtest',
  storeName: 'npmstore',
  version: 1,
  key: 'onlytest',
  autoIncrement: false,
  index: ['one'],
}

openDB(obj).then(async (db) => {
  try {
    // 添加了一条主键 onlytest 为 123123 的数据
    await addData(db, obj.storeName, { onlytest: '123123', one: 'testData' })
    // 取出该数据
    const res = await getDataByKey(db, obj.storeName, '123123')
    // 输出 {onlytest: '123123', one: 'testData'} 'res'
    console.log(res, 'res')
  } catch (error) {
    console.log(error, 'error')
  }
})

更新数据，数据库中有一条主键为 123123 的数据，找到这条数据并进行更新：

const obj = {
  dbName: 'npmtest',
  storeName: 'npmstore',
  version: 1,
  key: 'onlytest',
  autoIncrement: false,
  index: ['one'],
}

openDB(obj).then(async (db) => {
  try {
    // 添加了一条主键 onlytest 为 123123 的数据
    await addData(db, obj.storeName, { onlytest: '123123', one: 'testData' })
    // 更新该数据
    const res = await updateDB(db, obj.storeName, {
      onlytest: '123123',
      one: 'ssss',
    })
    // 输出 success res
    console.log(res, 'res')
  } catch (error) {
    console.log(error, 'error')
  }
})

存储数据，多执行 addData 方法，多存储几条数据，其中主键为当前时间戳

const obj = {
  dbName: 'npmtest',
  storeName: 'npmstore',
  version: 1,
  key: 'onlytest',
  autoIncrement: false,
  index: ['one'],
}

openDB(obj).then(async (db) => {
  try {
    await addData(db, obj.storeName, { onlytest: Date.now(), one: 'testData' })
  } catch (error) {
    console.log(error, 'error')
  }
})

存储之后的数据为

通过索引和游标分页查询记录

const obj = {
  dbName: 'npmtest',
  storeName: 'npmstore',
  version: 1,
  key: 'onlytest',
  autoIncrement: false,
  index: ['one'],
}

openDB(obj).then(async (db) => {
  try {
    // 每页有两条数据，查询第三页的数据
    const res = await cursorGetDataByIndexAndPage(
      db,
      obj.storeName,
      'one',
      'wefwe',
      3,
      2
    )
    // 输出
    // [{…}, {…}]0: {onlytest: 1733297454937, one: 'wefwe'}1: {onlytest: 1733297455146, one: 'wefwe'}length: 2[[Prototype]]: Array(0) 'res'
    console.log(res, 'res')
  } catch (error) {
    console.log(error, 'error')
  }
})

输出的是查询到的数据，一个数组，里面包含两条数据 {onlytest: 1733297454937, one: 'wefwe'} 和 {onlytest: 1733297455146, one: 'wefwe'}