# nf-webstorage-前端存储的管理

**Repository Path**: naturefw-code/nf-rollup-webstorage

## Basic Information

- **Project Name**: nf-webstorage-前端存储的管理
- **Description**: vite + vue3 做一个前端存储的管理类，包括indexedDB、webSQL和localstorage、localsession。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 14
- **Forks**: 2
- **Created**: 2021-11-13
- **Last Updated**: 2025-07-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: IndexedDB

## README

# nf-web-storage 前端存储的操作库

> 源码目录：https://naturefw.gitee.io/  

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

## 技术栈
* vue3
* vite2
* indexedDB 
* webSQL
* @naturefe/nf-tool

## 目录结构

* lib 存储管理的源码
* src 存储管理的使用demo
* distp 在线演示的代码

## 安装教程

```
yarn add @naturefw/storage
```

## 源码

[![自然框架/nf-web-storage](https://gitee.com/naturefw/nf-web-storage/widgets/widget_card.svg?colors=ffffff,1e252b,323d47,455059,d7deea,99a0ae)](https://gitee.com/naturefw/nf-web-storage)

## 相关源码
https://naturefw.gitee.io/ 

## 在线演示

https://naturefw.gitee.io/nf-rollup-webstorage/


## 使用说明
包含三个封装类库：indexedDB 的 help、webSQL 的 help 以及 localStorage 的 help

#### indexedDB  

* 定义对象仓库
```js
// /store-project/db.js

// 访问 indexedDB
import { dbCreateHelp } from '@naturefw/storage'
// 引入数据库数据
const db = {
  dbName: 'nf-indexedDB-test2',
  ver: 1
}

/**
 * 客户项目的 meta 的 db 缓存
 */
export default function createDBHelp (callback) {
  const help = 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
      }
    },
    // 设置初始数据
    async init (help) {
      if (typeof callback === 'function') {
        await callback(help)
      }
    }
  })
  return help
}


```

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

```js

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

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

```

* 组件里面使用

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

const { menuMeta } = useStores() // 获取对象仓库的名称

// 添加对象的测试
const add = () => {
  model.id = new Date().valueOf()
  model.test = '基础添加-vue:'
  help.addModel('menuMeta', model).then(() => {
    get()
  })
}


const set = () => {
  model.id = 123
  model.test = '仓库设置-vue:' + new Date().valueOf()
  menuMeta.set(model).then(() => {
    get()
  })
}

const put = async (id) => {
  modelTest.id = id
  modelTest.test = '对象修改-vue:' + new Date().valueOf()
  await modelTest.save().then(() => {})
  get()
}


const del = async (id) => {
  await help.delModel('menuMeta', id).then(() => {})
  get()
}


// 获取一个对象。id：null，获取全部对象
const get = (id = null) => {
  // 不设置ID，获取全部对象
  help.getModel('menuMeta', id).then((res) => {
    if (id === null) {
      dataSource.length = 0
      dataSource.push(...res)
    } else {
      foo.value = res
    }
  })
}

```



## 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)