分享技术 lowdb配合vue,实现本地存储

codetyphon
103阅读20 评论2020-05-27 09:24:26

做了一个todolist,使用的是vue,UI用的bootstrap-vue

功能: 添加、编辑、删除、自动保存

直接在html里写的,引入的unpkg,没有使用webpack。

介绍

lowdb是一款小巧轻便的数据库引擎,支持json、yaml和本地存储。

为什么使用 lowdb 做本地存储?

由于本地存储不能直接存对象,因此还需要进行序列化,很麻烦。而使用 lowdb 则无需再进行处理,直接一股脑丢给它就是了。

如何使用?

1、数据的获取

let todo = db.get('todo')

如果没有数据,则返回undefined

因此,拿到后需要判断一下再赋值

if(todo!=undefined){
    this.list=todo
}

2、数据的保存

db.set('todo', this.list).write()

自动保存

在操作的时候,需要自动保存,这样重新载入网页,数据都在。

核心很简单,就是使用深度监控。只要数组内容发生变化,就会触发。

watch:{
    list:{
        handler:function(newValue,oldValue){
            console.log(newValue)
            this.save()
        },
        deep:true,//数组内容发生变化也监控
    }
}

效果

源码

https://github.com/codetyphon/lowdb_todolist

体验

https://codetyphon.github.io/lowdb_todolist/index.html

社区声明
  • 社区旨在推动自由工作方式在国内渐进式发展
  • 区别于传统方式的工作职位,将会被优先推荐
  • 真诚且有趣有用的内容分享,在这里更受欢迎
  • 我们希望这里将是互联网创意工作者的聚集区
加入组织