二次封装localStorage，拥有解密、加密、过期功能

1.使用crypto-js来加密和解密。

npm i --save-dev crypto-js

import CryptoJS from 'crypto-js';

2.对 crypto-js 设置密钥和密钥偏移量,可以采用将一个私钥经 MD5 加密生成16位密钥获得。

const SECRET_KEY = CryptoJS.enc.Utf8.parse('3333e6e143439161'); //十六位十六进制数作为密钥
const SECRET_IV = CryptoJS.enc.Utf8.parse('e3bbe7e3ba84431a'); //十六位十六进制数作为密钥偏移量

3.加密功能

const encrypt = (data: object | string): string => {
    //加密
    if (typeof data === 'object') {
      try {
        data = JSON.stringify(data);
      } catch (e) {
        throw new Error('encrypt error' + e);
      }
    }
    const dataHex = CryptoJS.enc.Utf8.parse(data);
    const encrypted = CryptoJS.AES.encrypt(dataHex, SECRET_KEY, {
      iv: SECRET_IV,
      mode: CryptoJS.mode.CBC,
      padding: CryptoJS.pad.Pkcs7,
    });
    return encrypted.ciphertext.toString();
  };

4.解密功能

const decrypt = (data: string) => {
    //解密
    const encryptedHexStr = CryptoJS.enc.Hex.parse(data);
    const str = CryptoJS.enc.Base64.stringify(encryptedHexStr);
    const decrypt = CryptoJS.AES.decrypt(str, SECRET_KEY, {
      iv: SECRET_IV,
      mode: CryptoJS.mode.CBC,
      padding: CryptoJS.pad.Pkcs7,
    });
    const decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
    return decryptedStr.toString();
  };

storage API功能的实现

const setStorage = (key: string, value: any, expire: number = 24 * 60): boolean => {
    //设定值
    if (value === '' || value === null || value === undefined) {
      //空值重置
      value = null;
    }
    if (isNaN(expire) || expire < 0) {
      //过期时间值合理性判断
      throw new Error('Expire must be a number');
    }
    const data = {
      value, //存储值
      time: Date.now(), //存储日期
      expire: Date.now() + 1000 * 60 * expire, //过期时间
    };
    //是否需要加密，判断装载加密数据或原数据
    window[config.type].setItem(
      autoAddPreFix(key),
      config.isEncrypt ? encrypt(JSON.stringify(data)) : JSON.stringify(data),
    );
    return true;
  };

  const getStorageFromKey = (key: string) => {
    //获取指定值
    if (config.prefix) {
      key = autoAddPreFix(key);
    }
    if (!window[config.type].getItem(key)) {
      //不存在判断
      return null;
    }
    const storageVal = config.isEncrypt
      ? JSON.parse(decrypt(window[config.type].getItem(key) as string))
      : JSON.parse(window[config.type].getItem(key) as string);
    const now = Date.now();
    if (now >= storageVal.expire) {
      //过期销毁
      removeStorageFromKey(key);
      return null;
      //不过期回值
    } else {
      return storageVal.value;
    }
  };

  const getAllStorage = () => {
    //获取所有值
    const storageList: any = {};
    const keys = Object.keys(window[config.type]);
    keys.forEach((key) => {
      const value = getStorageFromKey(key);
      if (value !== null) {
        //如果值没有过期，加入到列表中
        storageList[key] = value;
      }
    });
    return storageList;
  };
  const getStorageLength = () => {
    //获取值列表长度
    return window[config.type].length;
  };

  const removeStorageFromKey = (key: string) => {
    //删除值
    if (config.prefix) {
      key = autoAddPreFix(key);
    }
    window[config.type].removeItem(key);
  };

  const clearStorage = () => {
    window[config.type].clear();
  };

  const autoAddPreFix = (key: string) => {
    //添加前缀，保持浏览器Application视图唯一性
    const prefix = config.prefix || '';
    return `${prefix}_${key}`;
  };

在使用时导入即可

import {
  setStorage
} from './util/storage'
setStorage('name', 'ashin', 1)