依托LocalStorage的lowdb对前端数据进行持久化

最新推荐文章于 2024-07-19 07:08:42 发布

Itqiandao

最新推荐文章于 2024-07-19 07:08:42 发布

阅读量691

点赞数

分类专栏： Vue 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/Itqiandao/article/details/115637721

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

该博客详细介绍了如何利用js-cookie、lowdb和lodash等前端组件实现数据缓存和持久化，确保数据在刷新后仍然保留。通过pathInit函数创建区分数据库和用户的存储路径，并使用vueX进行状态管理。set和get方法分别用于设置和获取缓存，确保数据的结构化读取。文章还提及了数据校验和默认值设定，以保证数据的完整性和一致性。

摘要由CSDN通过智能技术生成

一、相关组件

组件	作用	备注
js-cookie	访问存储cookie的组件
lowdb	JSON 数据库引擎
lodash	一致性、模块化、高性能的 JavaScript 实用工具库	主要用到cloneDeep 深度拷贝
vueX	管理共享状态	将vueX、LocalStorage合并使用状态最佳，vueX另一个章节再讨论

二、最终目标

通过前端数据缓存，持久化一部分数据，不随着刷新而消失。
数据内容读取支持查询等结构化读取。

三、实现步骤

1、获取存储路径，通过路径实现区分数据库、区分用户等

/**
 * @description 检查路径是否存在 不存在的话初始化
 * @param {Object} dbName {String} 数据库名称
 * @param {Object} path {String} 路径
 * @param {Object} user {Boolean} 区分用户
 * @param {Object} validator {Function} 数据校验钩子 返回 true 表示验证通过
 * @param {Object} defaultValue {*} 初始化默认值
 * @returns {String} 可以直接使用的路径
 */
function pathInit ({
  dbName = 'database',
  path = '',
  user = true,
  validator = () => true,
  defaultValue = ''
}) {
  const uuid = util.cookies.get('uuid') || 'ghost-uuid';
  const currentPath = `${dbName}.${user ? `user.${uuid}` : 'public'}${path ? `.${path}` : ''}`;
  const value = util.db.get(currentPath).value();

  if (!(value !== undefined && validator(value))) {
    util.db.set(currentPath, defaultValue).write();
  }
  return currentPath;
}

生成的path主要是给lowdb.set(‘path’,value);通过path设置成类似于不同的表。

2、获取存储路径，通过路径实现区分数据库、区分用户等

 set (context, {
      dbName = 'database',
      path = '',
      value = '',
      user = false
    }) {
      util.db.set(pathInit({
        dbName,
        path,
        user
      }), value).write();
    },
    /**
         * @description 获取数据
         * @description 效果类似于取值 dbName.path || defaultValue
         * @param context context
         * @param {Object} dbName {String} 数据库名称
         * @param {Object} path {String} 存储路径
         * @param {Object} defaultValue {*} 取值失败的默认值
         * @param {Object} user {Boolean} 是否区分用户
         */
    get (context, {
      dbName = 'database',
      path = '',
      defaultValue = '',
      user = false
    }) {
      return new Promise(resolve => {
        resolve(cloneDeep(util.db.get(pathInit({
          dbName,
          path,
          user,
          defaultValue
        })).value()));
      });
    },