vue-ls操作浏览器存储

124 阅读1分钟

vue可以通过安装插件vue-ls来存储数据到localStoragesessionStorage,还可以控制存储的有效时间

1. 安装

npm install vue-ls -s

2. 引入

import Storage from 'vue-ls';

Vue.use(Storage, {
  namespaced: '', // 存储的key的统一前缀
  name: 'ls', // 可通过Vue.ls this.$ls访问
  storage: 'local|session|memory', // 设置存储在localStorage还是sessionStorage
})

3. API

// 获取存储中的key的值
// default: 默认为null,如果key不存在,则返回default
Vue.ls.get(key, default);

// 设置一个key,并可以设置其有效时间
// expire: 默认为null, 单位为ms
Vue.ls.set(key, value, expire)

// 从存储中移除某一个key, 成功返回true,失败返回false
Vue.ls.remove(key)

// 清空存储中所有的key
Vue.ls.clear()

// 监听存储中某一个key的值是否变化
// callback接受三哥参数
// newValue: 存储中的新值
// oldValue:存储中的就只
// url:选项卡中的url
Vue.ls.on(name, callback)

// 删除key时触发
Vue.ls.off(name, callback)