功能介绍

前端 indexedDB 数据库操作。包括 数据库创建、数据新增、删除、查询等功能

安装

npm i fe-indexed-db --save

参数说明

| 参数名称 | 参数描述 | 默认值 | 是否必填 | | --------- | ---------------- | --------- | -------------------------- | | dbName | 数据库名称 | null | 是 | | dbVersion | 数据库版本 | 1 | 否 | | storeName | 表名 | null | 是 | | dbKey | 数据库主键 | timestamp | 否（不填，默认添加时间戳） | | debug | 是否开启调试模式 | false | 默认关闭本身的 console打印 |

示例

import { IndexedDB } from 'fe-indexed-db' // 引入包

// 示例：初始化
const myIndexedDB = new IndexedDB({
  dbName: 'MyIndexedDB', // 数据库名称
  dbVersion: 1, // 数据库版本
  storeName: 'tableA', // 表名
  dbKey: 'id', // 数据库主键
  debug: true, // 是否开启调试模式。true 开启console；false 关闭console
})
myIndexedDB.open()

// 示例：插入数据
const data = {
  name: '姓名A',
  age: 1,
  sex: 0,
  id: +new Date(),
  address: '详细住址A，详细住址A，详细住址A'
}
myIndexedDB.addData(data)

// 示例：查询数据
await this.myIndexedDB.getDataByField('name', '姓名A')

// 示例：删除数据。dbKey_value = 初始化里主键的值
myIndexedDB.delDataByDBkey(Number(dbKey_value))

// 示例：删库
myIndexedDB.deleteDB('MyIndexedDB')

Vue示例

<template>
  <div class="npm-package-demo">
    <el-button type="success" @click="createDB">链接数据库</el-button>
    <el-button @click="addBatchData">批量添加 1000 条数据 B</el-button>
    <el-button @click="addData">新增数据 A</el-button>
    <el-button @click="getData">查询数据 A</el-button>
    <el-button type="warning" @click="delData">删除数据</el-button>
    <el-button type="danger" @click="delDB">删除数据库</el-button>

    <el-table
        :data="dataList"
        style="width: 100%">
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="age" label="年龄" />
      <el-table-column prop="sex" label="性别" />
      <el-table-column prop="address" label="地址" />
    </el-table>

  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { IndexedDB } from 'fe-indexed-db' // 引入包

export default defineComponent({
  name: 'npm-package-demo',
  components: {},
  data: () => {
    return {
      myIndexedDB: null,
      dataList: [], // 数据列表
    }
  },
  methods: {
    // 示例：创建数据库
    createDB() {
      this.myIndexedDB = new IndexedDB({
        dbName: 'MyIndexedDB',
        dbVersion: 1,
        storeName: 'tableA',
        dbKey: 'id',
        debug: true, // 调试模式
      })
      this.myIndexedDB.open()
    },
    // 示例： 新增数据
    addData() {
      const data = {
        name: '姓名A',
        age: 1,
        sex: 0,
        id: +new Date(),
        address: '详细住址A，详细住址A，详细住址A'
      }
      this.myIndexedDB.addData(data)
      alert('添加成功')
      this.getData()
    },
    // 示例： 批量添加 1000 条数据
    addBatchData() {
      const data = {
        name: '姓名B',
        age: 2,
        sex: 1,
        id: +new Date(),
        address: '详细住址B，详细住址B，详细住址B'
      }
      let account = 0
      const timer = setInterval(() => {
        account++
        this.myIndexedDB.addData(data)
        if (account === 1000) {
          clearInterval(timer)
          alert('1000 条数据添加完成')
        }
      }, 20)
    },
    // 示例： 查询数据
    async getData() {
      this.dataList = await this.myIndexedDB.getDataByField('name', '姓名A')
    },
    // 示例： 删除数据
    delData() {
      const timestamp = prompt('请输入要删除的时间戳')
      if (timestamp) {
        this.myIndexedDB.delDataByDBkey(Number(timestamp))
        alert('删除成功')
        this.getData()
      }
    },
    // 示例： 删除数据库
    delDB() {
      this.myIndexedDB.deleteDB('MyIndexedDB')
    }
  },
  created() {
    this.createDB() // 默认创建
  }
})
</script>

<style lang="less" scoped>
.npm-package-demo {}
</style>