👀浅谈 Vue-ls使用

浅谈 Vue-ls使用

1 、介绍

在 Vue.js的开发过程中，我们经常需要在客户端存储一些数据，以便在用户关闭页面或者刷新后能够恢复之前的状态。Vue-ls插件就是一个以 Vue.js设计的本地存储解决方案，它基于 localStorage和 sesssionStorage，使得在 Vue 组件中存取数据变得异常

2 、安装

1｜npm install vue-ls --save

3 、使用

3.1 在 main.js中导入插件并且配置

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

// vue-ls配置
const storageOptions = {
  namespace:'vue_', // key键的前缀（随便起）
  name:'ls', // 变量名称（随便起）使用方式： Vue.ls或者 this.$ls 变量
  storgae:'local' // 保存方式：session、local、memory
}
Vue.use(Storage, storageOptions)

 其中 options配置说明：

• namespace: 命名空间，默认为 ls
• name:存储名称
• storage:存储引擎
• expries: 过期时间， 单位为毫秒。默认是 0，表示永不过期
• hasProto: 是否在原型上使用getter和 setter,默认是 true

3.2 在组件中使用

// 存储
Vue.ls.set('key',"value") //基本设计
Vue.ls.set("key", "value", 60*60*1000) // 有效期为 1 个小时

// 获取
Vue.ls.get('key')
Vue.ls.get("key", "设置默认值") // 如果没有获取到 可以设置默认返回值

// 监听变化
const callback = (val, oldVal, uri) =>{
  console.log('最新的数据:', val)
}
Vue.ls.on("key", callback) // 监听 key变化触发回调

// 移除
Vue.ls.remove("key")

// 在上下文中可以使用
this.$ls.set("key","value") // 同上