问题背景:
我们的前端项目客户端存储采用localStorage,恰好在同一个域下部署了2个前端项(a和b)目,判断用户是否登录的信息都用token字段存储在localStorage中。当我们打开项目a登录后存储了token,然后非正常退出(关掉浏览器窗口或者标签页),然后在打开项目b,问题就出现了,项目b从localStorage中获取到token,判断到用户已经登录,导致项目b显示不正常(没有获取到项目b所需的各种信息,项目a和项目b没有半毛钱关系)。这是所谓的同域下的localStorage命名冲突问题。
解决:
为每一个localStorage的key值提供唯一的前缀区分(我们采用的是用工程名称来区分,就是每一个前端工程起一个名称,虽然有重复的可能,不过概率很小,已经能够解决我们遇到的问题了)。之前已经讲解过通过定义storage.js工具类的方式解决的办法,本篇讲解通过使用Vue.ls插件的方式解决。
Vue.ls插件的安装
使用npm的方式安装
npm install vue-ls --save
使用yarn的方式安装
yarn add vue-ls
Vue.ls插件的使用
import Storage from 'vue-ls';
options = {
namespace: 'test_vue_ls__', // key键前缀,不同项目定义不同前缀,可保证跟其他项目进行区分
name: 'ls', // 命名Vue变量.[ls]或this.[$ls],
storage: 'local', // 存储名称: session, local, memory,local就是存储到localStorage,session
//就是存储到sessionStorage
};
Vue.use(Storage, options); // 或 Vue.use(Storage);
new Vue({
el: '#app',
mounted: function() {
Vue.ls.set('test1', 'test2');
// 设置有效期
Vue.ls.set('test1', 'test2', 60 * 60 * 1000); //有效1小时,以毫秒为单位
Vue.ls.get('test1');
Vue.ls.get('test2', 10); // 如果没有设置test2返回默认值10
let callback = (newVal, oldVal, uri) => {
console.log('localStorage change', newVal, oldVal, uri);
}
Vue.ls.on('test1', callback) //侦查改变test1键并触发回调
Vue.ls.off('test1', callback) //不侦查
Vue.ls.remove('test1'); // 移除
}
});
Global(全局) 使用方式:Vue.ls
Context(上下文)使用方式:this.$ls
3. API说明
Vue.ls.get(name, def)
返回storage中 name值。在返回之前,内部解析JSON中的值
def: 默认null, 如果为设置则返回 name .
2.Vue.ls.set(name, value, expire)
在storage设置 name 的 value .并将 value 转化为JSON
expire: 默认为 null , name 有效时间以毫秒为单位
Vue.ls.remove(name)
从storage中移除 name . 成功移除 true, 否则返回false.
Vue.ls.clear()
清除storage.
Vue.ls.on(name, callback)
持续监听 name 在其他标签上的更改,更改时触发 callback , 传递以下参数:
newValue: 当前storage中 name , 从持久化的JSON中解析
oldValue: 旧的storage中 name , 从持久化的JSON中解析
url: 修改来自选项卡的URL文章来源:https://www.toymoban.com/news/detail-412480.html
5.Vue.ls.off(name, callback)
删除以前的侦听器 Vue.ls.on(name, callback)
文章来源地址https://www.toymoban.com/news/detail-412480.html
到了这里,关于客户端LocalStorage命名冲突问题(二)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!