Vue.ls的使用

 介绍：Vue.ls 就是一个Vue插件，用于从Vue上下文中使用本地Storage，会话Storage和内存Storage。

一、安装

NPM

npm install vue-ls --save

YARN

yarn add vue-ls

二、使用

1.在【main.js】文件中引入

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

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

Vue.use(Storage, options)

2.使用

mounted () {
  this.$ls.set("name","test")
}

3.查看

三、API说明

Global（全局使用方式）：Vue.ls

Context （上下文使用方式 ）：this.$ls

• 读取：Vue.ls.get(name, def)
  • name：返回storage中 name值；
  • def: 默认null, 如果为设置则返回 name；
• 修改：Vue.ls.set(name, value, expire)
  • 在storage中设置 name 与 value ，并将 value 转化为JSON；
  • expire: 默认为 null , name 的有效时间以毫秒为单位，有效时间过后恢复为默认值null；
• 清除storage：Vue.ls.clear()
  • 删除某一个：Vue.ls.clear(name)；
• 设置侦听器：Vue.ls.on(name, callback)
  • 持续监听 name 在其他标签上的更改，更改时触发 callback；
  • callback接受三个参数：
    • newValue: 存储中的新值；
    • oldValue：存储中的旧值；
    • url：修改来自选项卡的 url；
• 删除设置的侦听器：Vue.ls.off (name, callback)

如果你有什么意见或者建议也欢迎给我留言，谢谢。