Found a small vue storage engine for local storage is too convenient

Posted May 27, 20201 min read

A few years ago, when I first learned vue, I started with todolist.

Many years have passed now. Today I discovered a vue database engine that can be used for local storage. So, it took a few hours to build a wheel again. Using bootstrap-vueUI.

Function:add, edit, delete, auto save

Written directly in html, the introduced unpkg did not start vue locally.

Introduction

lowdb is a small and lightweight database engine that supports json, yaml and local storage.

Why use lowdb for local storage?

Because local storage cannot directly store objects, it also needs to be serialized, which is very troublesome. With lowdb, you don't need to do any more processing, just throw it to your brain.

how to use?

  1. Data acquisition

    let todo = db.get('todo')

If there is no data, it returns undefined

Therefore, after getting it, you need to judge and then assign the value

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

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

Auto Save

During operation, it needs to be automatically saved, so that when the web page is reloaded, the data is all there.

The core is very simple, it is to use in-depth monitoring. It will be triggered whenever the contents of the array change.

watch:{
    list:{
        handler:function(newValue, oldValue) {
            console.log(newValue)
            this.save()
        },
        deep:true, //The array content changes also monitor
    }
}

Effect

Source code

https://github.com/codetyphon/lowdb_todolist

Experience

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