@rc-utils/indexed-db

安装

使用 npm:

$ npm i -g npm
$ npm i @rc-utils/indexed-db

基本用法

直接引用 IndexedDBUtil 构造新实例

import IndexedDBUtil from '@rc-utils/indexed-db'
import moment from 'moment'
import React, { useEffect, useState } from 'react'
import ReactDOM from 'react-dom'

type ItemType = {
  pkid: string
  value: any
  birthday: Date
  create_time: Date
  update_time: Date
}

const dbInstanceProps = {
  dbConfig: {
    name: 'rc-utils-indexed-db', // 数据库名称
    version: 1,
  },
  tables: [
    {
      tableName: 'module_a',
      pkidField: 'pkid',
      tableFields: [
        {
          indexName: 'pkid',
          unique: true,
        },
        {
          indexName: 'value',
        },
        {
          indexName: 'birthday',
        },
        {
          indexName: 'create_time',
        },
        {
          indexName: 'update_time',
        },
      ],
    },
  ],
  onSuccess: (util) => {
    // 数据库打开成功好了
    console.log('数据库打开成功', util)
  },
}

const dbInstance = new IndexedDBUtil(dbInstanceProps)

const App = () => {
  const [records, setRecords] = useState<ItemType[]>([])
  const [total, setTotal] = useState<number>(0)

  const handlerQuery = () => {
    dbInstance
      .query<ItemType>({
        tableName: 'module_a',
      })
      .then((dataSource) => {
        setRecords(dataSource)
      })
  }

  const handlerCount = () => {
    dbInstance
      .count({
        tableName: 'module_a',
      })
      .then((total) => {
        setTotal(total)
      })
  }

  const handlerInsert = () => {
    const key = new Date().getTime()
    dbInstance
      .insert<ItemType>({
        tableName: 'module_a',
        record: {
          pkid: `pkid-${key}`,
          value: key,
          birthday: new Date(),
          create_time: new Date(),
          update_time: new Date(),
        },
      })
      .then((pkid) => {
        console.log('~ handlerInsert ~ pkid', pkid)
        handlerQuery()
        handlerCount()
      })
  }

  const handlerUpdate = () => {
    const lastRecord = records[records.length - 1]
    if (lastRecord) {
      dbInstance
        .update<ItemType>({
          tableName: 'module_a',
          pkidValue: lastRecord.pkid,
          record: {
            value: `新数据-${lastRecord.value}`,
            update_time: new Date(),
          },
        })
        .then((pkid) => {
          console.log('~ handlerUpdate ~ pkid', pkid)
          handlerQuery()
          handlerCount()
        })
    }
  }

  const handlerDelete = () => {
    const lastRecord = records[records.length - 1]
    if (lastRecord) {
      dbInstance
        .delete({
          tableName: 'module_a',
          pkidValue: lastRecord.pkid,
        })
        .then(() => {
          handlerQuery()
          handlerCount()
        })
    }
  }

  const handlerClear = () => {
    const lastRecord = records[records.length - 1]
    if (lastRecord) {
      dbInstance
        .clear({
          tableName: 'module_a',
        })
        .then(() => {
          handlerQuery()
          handlerCount()
        })
    }
  }

  useEffect(() => {
    handlerQuery()
    handlerCount()
  }, [])

  return (
    <div className="container">
      <div className="toolbar">
        <button onClick={() => handlerInsert()}>插入数据</button>
        <button onClick={() => handlerUpdate()}>修改最后一条数据</button>
        <button onClick={() => handlerDelete()}>删除最后一条数据</button>
        <button onClick={() => handlerClear()}>清空全部数据</button>
        <button onClick={() => handlerQuery()}>查询数据</button>
        <button onClick={() => handlerCount()}>统计记录</button>
      </div>
      <div className="main">
        <table>
          <thead>
            <tr>
              <th>主键</th>
              <th>记录值</th>
              <th>生日</th>
              <th>创建时间</th>
              <th>修改时间</th>
            </tr>
          </thead>
          <tbody>
            {records.map((record) => {
              return (
                <tr key={record.pkid}>
                  <td>{record.pkid}</td>
                  <td>{record.value}</td>
                  <td>
                    {moment(record.birthday).format('YYYY-MM-DD HH:mm:ss')}
                  </td>
                  <td>
                    {moment(record.create_time).format('YYYY-MM-DD HH:mm:ss')}
                  </td>
                  <td>
                    {moment(record.update_time).format('YYYY-MM-DD HH:mm:ss')}
                  </td>
                </tr>
              )
            })}
          </tbody>
          <tfoot>
            <tr>
              <td colSpan={5}>总共 {total} 条记录</td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

Hooks 用法

在 React 中使用 useIndexDB Hook,返回对应的实例

import { useIndexDB } from '@rc-utils/indexed-db'
import moment from 'moment'
import React, { useEffect, useState } from 'react'
import ReactDOM from 'react-dom'

type ItemType = {
  pkid: string
  value: any
  birthday: Date
  create_time: Date
  update_time: Date
}

const dbInstanceProps = {
  dbConfig: {
    name: 'rc-utils-indexed-db', // 数据库名称
    version: 1,
  },
  tables: [
    {
      tableName: 'module_a',
      pkidField: 'pkid',
      tableFields: [
        {
          indexName: 'pkid',
          unique: true,
        },
        {
          indexName: 'value',
        },
        {
          indexName: 'birthday',
        },
        {
          indexName: 'create_time',
        },
        {
          indexName: 'update_time',
        },
      ],
    },
  ],
  onSuccess: (util) => {
    // 数据库打开成功好了
    console.log('数据库打开成功', util)
  },
}

const App = () => {
  const [records, setRecords] = useState<ItemType[]>([])
  const [total, setTotal] = useState<number>(0)
  const { instance: dbInstance, update, reset } = useIndexDB(dbInstanceProps)

  const handlerQuery = () => {
    dbInstance
      .query<ItemType>({
        tableName: 'module_a',
      })
      .then((dataSource) => {
        setRecords(dataSource)
      })
  }

  const handlerCount = () => {
    dbInstance
      .count({
        tableName: 'module_a',
      })
      .then((total) => {
        setTotal(total)
      })
  }

  const handlerInsert = () => {
    const key = new Date().getTime()
    dbInstance
      .insert<ItemType>({
        tableName: 'module_a',
        record: {
          pkid: `pkid-${key}`,
          value: key,
          birthday: new Date(),
          create_time: new Date(),
          update_time: new Date(),
        },
      })
      .then((pkid) => {
        console.log('~ handlerInsert ~ pkid', pkid)
        handlerQuery()
        handlerCount()
      })
  }

  const handlerUpdate = () => {
    const lastRecord = records[records.length - 1]
    if (lastRecord) {
      dbInstance
        .update<ItemType>({
          tableName: 'module_a',
          pkidValue: lastRecord.pkid,
          record: {
            value: `新数据-${lastRecord.value}`,
            update_time: new Date(),
          },
        })
        .then((pkid) => {
          console.log('~ handlerUpdate ~ pkid', pkid)
          handlerQuery()
          handlerCount()
        })
    }
  }

  const handlerDelete = () => {
    const lastRecord = records[records.length - 1]
    if (lastRecord) {
      dbInstance
        .delete({
          tableName: 'module_a',
          pkidValue: lastRecord.pkid,
        })
        .then(() => {
          handlerQuery()
          handlerCount()
        })
    }
  }

  const handlerClear = () => {
    const lastRecord = records[records.length - 1]
    if (lastRecord) {
      dbInstance
        .clear({
          tableName: 'module_a',
        })
        .then(() => {
          handlerQuery()
          handlerCount()
        })
    }
  }

  useEffect(() => {
    handlerQuery()
    handlerCount()
  }, [])

  return (
    <div className="container">
      <div className="toolbar">
        <button onClick={() => handlerInsert()}>插入数据</button>
        <button onClick={() => handlerUpdate()}>修改最后一条数据</button>
        <button onClick={() => handlerDelete()}>删除最后一条数据</button>
        <button onClick={() => handlerClear()}>清空全部数据</button>
        <button onClick={() => handlerQuery()}>查询数据</button>
        <button onClick={() => handlerCount()}>统计记录</button>
      </div>
      <div className="main">
        <table>
          <thead>
            <tr>
              <th>主键</th>
              <th>记录值</th>
              <th>生日</th>
              <th>创建时间</th>
              <th>修改时间</th>
            </tr>
          </thead>
          <tbody>
            {records.map((record) => {
              return (
                <tr key={record.pkid}>
                  <td>{record.pkid}</td>
                  <td>{record.value}</td>
                  <td>
                    {moment(record.birthday).format('YYYY-MM-DD HH:mm:ss')}
                  </td>
                  <td>
                    {moment(record.create_time).format('YYYY-MM-DD HH:mm:ss')}
                  </td>
                  <td>
                    {moment(record.update_time).format('YYYY-MM-DD HH:mm:ss')}
                  </td>
                </tr>
              )
            })}
          </tbody>
          <tfoot>
            <tr>
              <td colSpan={5}>总共 {total} 条记录</td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))