Client LocalStorage naming conflict (2)

Problem background:

Our front-end project client storage uses localStorage, and two front-end projects (a and b) happen to be deployed under the same domain, and the information for judging whether a user is logged in is stored in localStorage in the token field. When we open project a and store the token after logging in, then exit abnormally (close the browser window or tab), and then open project b, the problem occurs. Project b obtains the token from localStorage, and judges that the user has Log in, causing project b to display abnormally (the various information required by project b has not been obtained, and project a and project b have no half-money relationship). This is the so-called localStorage naming conflict problem under the same domain.

solve:

Provide a unique prefix distinction for each localStorage key value (we use the project name to distinguish, that is, each front-end project has a name, although there is a possibility of duplication, but the probability is very small, it has been able to solve the problems we encountered problem). I have explained the solution by defining the storage.js tool class before, and this article explains the solution by using the Vue.ls plug-in.

Installation of the Vue.ls plugin

使用npm的方式安装
npm install vue-ls --save

使用yarn的方式安装
yarn add vue-ls

Use of Vue.ls plugin

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 (global) usage: Vue.ls
Context (context) usage: this.$ls

3. API description
Vue.ls.get(name, def)
returns the name value in storage. Before returning, internally parse the value in JSON
def: default null, if it is set, return name.
2.Vue.ls.set(name, value, expire)
sets the value of name in storage and converts value to JSON
expire : The default is null, the effective time of name is in milliseconds

Vue.ls.remove(name)
removes name from storage. True if removed successfully, otherwise returns false.
Vue.ls.clear()
clears storage.

Vue.ls.on(name, callback)
continuously monitors name changes on other tags, triggers callback when changed, and passes the following parameters:
newValue: name in the current storage, parse oldValue from the persistent JSON
: name in the old storage , parse the url from the persisted JSON
: modify the URL from the tab

5.Vue.ls.off(name, callback)
deletes the previous listener Vue.ls.on(name, callback)