nf-web-storage

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

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

介绍

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

技术栈

• vue3
• vite2
• indexedDB
• webSQL

目录结构

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

安装教程

yarn add nf-web-storage

源码

相关源码

https://naturefw.gitee.io/

在线演示

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

使用说明

包含三个封装类库：indexedDB 的 help、webSQL 的 help 以及 localStorage 的 help

indexedDB

• 定义对象仓库

// /store-project/db.js

// 访问 indexedDB
import { dbCreateHelp } from 'nf-web-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 里面调用，初始化

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

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

• 组件里面使用

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
3. 你可以 https://gitee.com/explore 这个地址来了解 Gitee 上的优秀开源项目
4. GVP 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5. Gitee 官方提供的使用手册 https://gitee.com/help
6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 https://gitee.com/gitee-stars/