vue——storage命名冲突问题解决 前端

参考：客户端localStorage命名冲突问题 - 韩帅 - 博客园 (cnblogs.com)

　　　Vue的Vue-ls使用 - 简书 (jianshu.com)

我的情况：项目采用localStorage方式储值，但变量名多后，会出现同名变量，跟其他项目冲突

解决方法：存储时，增加项目前缀名

方法一. 使用vue-ls插件

1.安装vue-ls

npm install vue-ls --save

2. main.js引入

... ...

import Storage from 'vue-ls';
 
options = {
  namespace: 'vuejs_', // key键前缀
  name: 'ls', // 命名Vue变量.[ls]或this.[$ls],
  storage: 'local', // 存储名称: session, local, memory
};
 
Vue.use(Storage, options);

... ...

3. 组件中使用

... ...

Vue.ls.set('foo', 'boo');
 // 设置有效期
Vue.ls.set('foo', 'boo', 60 * 60 * 1000); // 有效1小时
Vue.ls.get('foo');
Vue.ls.get('boo', 10); // 如果没有设置boo返回默认值10 
        
let callback = (val, oldVal, uri) => {
    console.log('localStorage change', val);
} 
        
Vue.ls.on('foo', callback) // 侦查改变foo键并触发回调 
Vue.ls.off('foo', callback) // 删除以前的侦听器
        
Vue.ls.remove('foo'); // 移除

... ...

方法二. 使用js

1.新建storage.js文件，如下

/**
 * 封装localStorage方法,添加ls前缀，防止ls的key值命名污染
 */
const prefix = 'vuejs_';

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));
  },
};

2. 组件中使用

... ...

import storage from '@/util/storage.js';

... ...

storage.set('name', '张三');
storage.get('name');

storage.clear();

... ...