# indexedDB封装库

**Repository Path**: Dreamyaner/indexed-db-package-library

## Basic Information

- **Project Name**: indexedDB封装库
- **Description**: indexedDB 封装库，用于操作浏览器的indexDB
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-02-01
- **Last Updated**: 2024-03-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

前端存储的操作库

## 介绍
在 vue3 的环境下对前端存储进行封装，便于使用。  
基于 promise 封装 indexedDB、webSQL。  
以及对 localstorage、localsession的封装。

## 技术栈
* vue3
* vite
* indexedDB 


```

## 使用说明
包含三个封装类库：indexedDB 的 help 的 help 

#### indexedDB  

* 定义对象仓库
```js

// 访问 indexedDB
import { dbCreateHelp } from '../../packages/storage.js'

// 引入数据库数据
const db = {
  dbName: 'nf-indexedDB-test',
  ver: 1
}

/**
 * 客户项目的 meta 的 db 缓存
 */
export default function setup (callback) {
  const install = dbCreateHelp({
    // dbFlag: 'project-meta-db',
    dbConfig: db,
    stores: { // 数据库里的表
      moduleMeta: { // 模块的meta {按钮,列表,分页,查询,表单若干}
        id: 'moduleId',
        index: {},
        isClear: false
      },
      menuMeta: { // 菜单用的meta
        id: 'id',
        index: {},
        isClear: false
      },
      serviceMeta: { // 后端API的meta，在线演示用。
        id: 'moduleId',
        index: {},
        isClear: false
      },
      testIndex: { // 演示一下索引的查询。
        id: 'moduleId',
        index: {
          kind: false,
          type: false
        },
        isClear: false
      }
    },
    // 加入初始数据
    init (help) {
      if (typeof callback === 'function') {
        callback(help)
      }
    }
  })
  return install
}

```

* main.js 里面调用，初始化

```js

// 引入 indexedDB 的 help
import dbHelp from './store-project/db.js'

dbHelp((help) => {
  // indexedDB 准备好了
  console.log('main里面获取 indexedDB 的help', help)
})

```

* 组件里面使用

```js
import { useStores, useDBHelp } from 'nf-web-storage'

const { menuMeta } = useStores()
 

// 添加对象的测试
const add = () => {
  const t1 = window.performance.now()
  console.log('\n -- 准备添加对象 --：', t1)
  const model = {
    id: new Date().valueOf(),
    name: 'test-在vue里面使用。'
  }
  menuMeta.add(model).then((res) => {
    const t2 = window.performance.now()
    console.log('添加成功！', res, '用时：', t2 - t1, '\n')
  
  })
}

```