本文转载自:https://www.cnblogs.com/hanshuai/p/12194307.html
问题背景:
我们的前端项目客户端存储采用localStorage,恰好在同一个域下部署了2个前端项(a和b)目,判断用户是否登录的信息都用token字段存储在localStorage中。当我们打开项目a登录后存储了token,然后非正常退出(关掉浏览器窗口或者标签页),然后在打开项目b,问题就出现了,项目b从localStorage中获取到token,判断到用户已经登录,导致项目b显示不正常(没有获取到项目b所需的各种信息,项目a和项目b没有半毛钱关系)。这是所谓的同域下的localStorage命名冲突问题。
解决:
为每一个localStorage的key值提供唯一的前缀区分(我们采用的是用工程名称来区分,就是每一个前端工程起一个名称,虽然有重复的可能,不过概率很小,已经能够解决我们遇到的问题了)
实现:
在项目根目录下创建config.js文件,填写工项目名:
export default {
APP_NAME: 'new-electric-bicycle-web', // 工程名
}
项目根目录下新增util/storage.js文件,写一个localStorage的工具函数:
/**
* Created by hs on 2020/1/14
* 封装localStorage方法,添加ls前缀,防止ls的key值命名污染
*/
import Config from '../../config'
const prefix = Config.APP_NAME
export default {
/**
* 获取一个值
* @param key
* @return {*}
*/
get (key) {
key = `${prefix}-${key}`
let value = localStorage.getItem(key)
if (!value) {
return null
}
return JSON.parse(value)
},
/**
* 存储一个值
* @param key
* @param value
*/
set (key, value) {
key = `${prefix}-${key}`
localStorage.setItem(key, JSON.stringify(value))
},
/**
* 删除一个值
* @param key
*/
remove (key) {
key = `${prefix}-${key}`
localStorage.removeItem(key)
},
/**
* 清空所有值(当前项目命名空间下的key值)
*/
clear () {
let len = localStorage.length
let keys = []
for (let i = 0; i < len; i++) {
let key = localStorage.key(i)
if (key && key.startsWith(prefix)) {
keys.push(key)
}
}
keys.map(key => localStorage.removeItem(key))
},
}