localstorage 命名冲突

localStorage 命名冲突

大众化解决方案

新建一个 config.js，再在 utils 目录下新建 storage.js，给所有 key 拼接一个前缀：

// config.js
export default {
  APP_NAME: 'new-electric-bicycle-web', // 工程名
};

// storage.js
import Config from '../../config';
const prefix = Config.APP_NAME;

export default {
  get(key) {
    key = `${prefix}-${key}`;
    const value = localStorage.getItem(key);
    if (!value) return null;
    return JSON.parse(value);
  },
  set(key, value) {
    key = `${prefix}-${key}`;
    localStorage.setItem(key, JSON.stringify(value));
  },
  remove(key) {
    key = `${prefix}-${key}`;
    localStorage.removeItem(key);
  },
  clear() {
    const len = localStorage.length;
    const keys = [];
    for (let i = 0; i < len; i++) {
      const key = localStorage.key(i);
      if (key && key.startsWith(prefix)) keys.push(key);
    }
    keys.forEach(k => localStorage.removeItem(k));
  }
};

str.startsWith(''); // 字符串是否以 '' 开头

补充：除了"加前缀"以外，还有几种避免冲突的思路：

• 按业务 / 模块拆 namespace：user:profile，order:list，便于按前缀清理。
• 统一封装工具函数：所有读写都走 storage 模块，禁止业务代码直接调用 localStorage。
• 加密 / 压缩 key：避免可读性太好被外部脚本猜到（注意：仅是混淆，不是真正的安全方案）。
• 使用第三方库：localforage（支持 IndexedDB / WebSQL 兜底）、store.js。

来源整理自：我的有道云笔记