Vue-ls

Vue-ls详解

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

安装

NPM

npm install vue-ls --save

使用

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)

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，和官方解析不一样，不知道为什么？？
    }
}