项目优化——localStorage|sessionStorage统一管理方案

localStorage|sessionStorage主要区别

sessionStorage的生命周期是浏览器关闭前，而localStorage的生命周期是永久的。

为什么要管理

防止项目滥用本地存储(localStorage|sessionStorage)而出现例如：

不同业务线，却用着同样的key命名存储，存储数据相互修改。这样的bug一旦出现，可能很难排查到，毕竟测试流程一般是单业务线的走。

完整代码附带详细注释

代码只演示单一存储方式，具体使用哪种根据项目使用情况及两者区别来定。

如果项目需要两种存储方法一起用，可以自行优化(storage对象另外添加3个方法或者现有方法添加参数支持，当然还需要同步修改优化原型方法)。

核心代码

/**
 * storage再封装
 * 需要在./data中注册后的字段才可以运行存储
 */
// 引入注册列表
import {config} from './data';

// 存储变量添加统一前缀(例如：项目_作者_ 下划线分割的方式)
const pre = 'project_author_';

// 存储方式 'localStorage' | 'sessionStorage'
const storageType = 'sessionStorage';

/**
 * 核心：阻止未注册key添加到存储中——装饰模式优化setItem方法
 * 考虑到没有添加就不会有获取和删除，所以只对setItem做处理
 */
const setOptimize = function (setItem) {
  return function (...args) {
    // setItem第一个入参为key
    const [key] = args;
    // 自定义注册列表config中，如果不包含当前key(需要截取掉自定义前缀)则阻止存入，并添加友善提示
    if (!config.includes(key.substr(pre.length))) {
      // 如果有eslint配置禁用console，可以自行添加 // eslint-disable-next-line
      console.warn('当前字面量' + key + '未配置缓存，请在/src/tools/localStorage/data中注入属性');
    } else {
      // 如果已注册则直接返回原储存方法即可
      return setItem.apply(this, args);
    }
  };
};
// 获取原型并调用优化方法
Object.getPrototypeOf(window[storageType]).setItem = setOptimize(Object.getPrototypeOf(window[storageType]).setItem);

// 重写调用本地存储的方法，统一项目的调用方式
const storage = {
  get (key) {
    return JSON.parse(window[storageType].getItem(pre + key));
  },
  set (key, value) {
    return window[storageType].setItem(pre + key, JSON.stringify(value));
  },
  remove (key) {
    return window[storageType].removeItem(pre + key);
  }
};

export default storage;

配置示例(key的列表)

export const config = [
  'userName', // 缓存的用户名
  'TOCKEN', // tocken
  '@@', // ***
  'vuex' // ***
];

调用简易示例

// 引入存储方法
import storage from '@/tools/localStorage';

// 存
storage.set('userName', this.userName);
// 取
this.userName = storage.get('userName');
// 删
storage.remove('userName');

成果图展示

存储数据展示

未注册key添加存储时友善提示展示

尾言

不管项目是否需要这样的管理方案，总归是有益无害。

最后：你是否知道配置示例(key的列表)中'@@'和'vuex'分别是定义什么的key吗？欢迎留言评论。