封装本地缓存localStorage与sessionStorage

当前许多项目对localStorage与sessionStorage的使用是直接调用，由于是明文存储，存在暴露信息的情况，本文对这两种本地存储方式进行了基本的加密与封装。为了方便用户使用，使用了TS语法进行限制与提示，查看本文时可以根据自己实际项目进行调整或是优化

参数

/** key 值 */
type StorageKey = 'token' | 'userInfo';

/** storage存储类型 */
type StorageType = 'localStorage' | 'sessionStorage';

/** 是否需要加密 */
const isEncrypt = true;

/** key值统一前缀 */
const PREFIX = 'my_project_';

设置本地缓存 setStorage

由于storage本身不支持设置过期时间，如果需要配置过期时间，可以效仿Cookie传入当前时间与时间戳进行计算，此处不做过多说明

/** 默认使用localStorage类型 */
export const setStorage = (key: StorageKey, value: any, type = 'localStorage') => {
  try {
    if (!value) value = null;

    // 判断是否开启加密 
    const data = isEncrypt
      ? encrypt(JSON.stringify(value))
      : JSON.stringify(value);

    window[type].setItem(PREFIX + key, data);
  } catch (err) {
    console.error(`Error set ${PREFIX + key} from ${type}`);
  }
}

获取本地数据 getStorage

export const getStorage = (key: StorageKey, type: StorageType = 'localStorage') => {
  if (!key) return null;

  isSupStorage(type);
  try {
    const storageStr = window[type].getItem(PREFIX + key);
    // 不存在数据或数据为null时直接返回null
    if (!storageStr || JSON.stringify(storageStr) === 'null') return null;
    
    // 判断是否需要解密
    const data = isEncrypt ? decrypt(storageStr) : storageStr;
    return JSON.parse(data);
  } catch (err) {
    console.error(`Error get ${PREFIX + key} from ${type}`);
  }
}

获取全部缓存

export const getStorageAll = (type: StorageType = 'localStorage') => {
  // 获取type类型缓存所有内容长度
  const length = window[type].length;
  const storageArr = [];

  for (let i = 0; i < length; i++) {
    const key = window[type].key[i];
    
    const storageStr = window[type].getItem(key);
    // 判断是否需要解密
    const data: any = isEncrypt ? decrypt(storageStr) : storageStr;
    storageArr.push({ key: key[i], value: JSON.parse(data) });
  }
  return storageArr;
}

删除指定storage

export const removeStorage = (key: StorageKey, type: StorageType = 'localStorage') => {
  window[type].removeItem(PREFIX + key);
}

清空storage

export const clearStorage = (type: StorageType = 'localStorage') => {
  window[type].clear();
}

当不确定项目运行环境时可以查看当前环境是否支持本地缓存

/** 判断是否支持Storage */
const isSupStorage = (type: string) => {
  if (!window) {
    throw new Error('当前环境非浏览器，无法使用window实例');
  }
  if (type === 'localStorage' && !window.localStorage) {
    throw new Error('当前环境无法使用localStorage');
  }
  if (type === 'sessionStorage' && !window.sessionStorage) {
    throw new Error('当前环境无法使用sessionStorage');
  }
}

加密 & 解密

本文使用了crypto-js进行加解密，安装路径：
npm install crypto-js
or
yarn add crypto-js

导入crypto-js

import CryptoJs from 'crypto-js'

设置秘钥和秘钥偏移量

// 十六位十六进制数作为秘钥
const KEY = CryptoJs.enc.Utf8.parse('0123456789abcdef');  
// 十六位十六进制数作为秘钥偏移量
const IV = CryptoJs.enc.Utf8.parse('1234567812345678');

封装加密方法

export const encrypt = (data: any) => {
  if (typeof data === 'object') {
    try {
      data = JSON.stringify(data);
    } catch (err) {
      console.error('Encrypt error:', err);
    }
  }
  const dataHex = CryptoJs.enc.Utf8.parse(data);
  const encrypted = CryptoJs.AES.encrypt(dataHex, KEY, {
    iv: IV,
    mode: CryptoJs.mode.CBC,
    padding: CryptoJs.pad.Pkcs7
  });

  return encrypted.ciphertext.toString();
}

封装解密方法

export const decrypt = (data: any) => {
  const encryptHexStr = CryptoJs.enc.Hex.parse(data);
  const str = CryptoJs.enc.Base64.stringify(encryptHexStr);
  const decrypted = CryptoJs.AES.decrypt(str, KEY, {
    iv: IV,
    mode: CryptoJs.mode.CBC,
    padding: CryptoJs.pad.Pkcs7
  });
  const decryptStr = decrypted.toString(CryptoJs.enc.Utf8);
  return decryptStr.toString();
}