今日总结

今天学习了vue的具体

 

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)
1
2
3
4
5
6
7
8
9
10
11
// login.vue
methods: {
setKey () {
this.$ls.set('name', 'cez')
}
}
1
2
3
4
5
6
结果：

 

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
}
}
1
2
3
4
5
6
7
8
9

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
}
}
1
2
3
4
5
6

Vue.ls.remove (name)

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

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

 

Vue.ls.clear ( )

作用：清空所有 key。

methods: {
clearKey () {
this.$ls.clear()
}
}
1
2
3
4
5

Vue.ls.on (name, callback)

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

callback 接受三个参数：

newValue：存储中的新值

oldValue：存储中的旧值

url：修改来自选项卡的 url

Vue.ls.off (name, callback)

作用：删除设置的侦听器