客户端LocalStorage命名冲突问题(二)

问题背景：

我们的前端项目客户端存储采用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

5.Vue.ls.off(name, callback)
删除以前的侦听器 Vue.ls.on(name, callback)