客户端localStorage命名冲突问题

Posted 2021-03-16 hanshuai

问题背景：

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