客戶端localStorage命名沖突問題

問題背景：

我們的前端項目客戶端存儲采用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))
  },
}