@tc-utils/indexed-db
v1.1.0
Published
## 安装
Downloads
25
Maintainers
Readme
@tc-utils/indexed-db
安装
使用 npm:
$ npm i -g npm
$ npm i @tc-utils/indexed-db
基本用法
直接引用
IndexedDBUtil
构造新实例
import IndexedDBUtil from '@tc-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: 'tc-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 '@tc-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: 'tc-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'))