Vue-ls 的详解

作用

Vue-ls 是 Vue 的一个插件，用于操作 Local Storage(本地存储)、Session Storage(会话存储)、Memory(内存存储)。

安装

CDN

https://unpkg.com/vue-ls

NPM

npm install vue-ls --save

Yarn

yarn add vue-ls

使用

import Vue from 'vue'
import Storage from 'vue-ls'

// vue-ls 的配置
const storageOptions = {
    namespace: 'vue_',   // key 键的前缀（随便起）
      name: 'ls',          // 变量名称（随便起） 使用方式：Vue.变量名称 或 this.$变量名称
      storage: 'local'     // 作用范围：local、session、memory
}

Vue.use(Storage, storageOptions)

// login.vue

methods: {
    setKey () {
        this.$ls.set('name', 'cez')
    }
}

结果：

Global 全局使用方式

Vue.ls

Context上下文使用方式

this.$ls

API

Vue.ls.get (name, def)

作用：获取存储中的 key

name：要获取的 key；

def：默认为 null。如果 key 不存在，则返回 def。

methods: {
    getKey () {
        // age 和 age2 都不存在
        const age = this.$ls.get('age')
        const age2 = this.$ls.get('age2', 22)
        console.log(age)    // null
        console.log(age2)   // 22
    }
}

Vue.ls.set (name, value, expire)

作用：设置一个 key，并且可以设置有效时间。

expire：默认为 null。name 的有效时间，单位为毫秒。

methods: {
    setKey () {
        this.$ls.set('age', 22)   // age 的有效时间为永久，除非自动清除
        this.$ls.set('name', 'cez', 3000)   // name 的有效时间为 3s，3s 后为 null
    }
}

Vue.ls.remove (name)

作用：从存储中删除某一个 key，成功返回 true，否则返回 false。

methods: {
    removeKey () {
        const age = this.$ls.remove('age')
        console.log(age)   // undefined：不管删除成功还是删除失败都会返回 undefined，和官方解析不一样，不知道为什么？？
    }
}

Vue.ls.clear ( )

作用：清空所有 key。

methods: {
    clearKey () {
        this.$ls.clear()
    }
}

Vue.ls.on (name, callback)

作用：设置侦听器，监听 key，若发生变化时，就会触发回调函数 callback。

callback 接受三个参数：

newValue：存储中的新值

oldValue：存储中的旧值

url：修改来自选项卡的 url

Vue.ls.off (name, callback)

作用：删除设置的侦听器