Vue、uniApp、微信小程序、Html5等实现数缓存

此文章带你实现前端缓存，利用时间戳封装一个类似于Redis可以添加过期时间的缓存工具
不仅可以实现对缓存数据设置过期时间，还可以自定义是否需要对缓存数据进行加密处理

工具介绍说明

对缓存数据进行非对称加密处理

对必要数据进行缓存，并设置过期时间，并设置是否需要对缓存数据进行加密处理

其他工具

1、过期时间：封装好的工具，可以添加数据的缓存时长（过期时间）
2、是否加密：可以根据需求，是否需要对缓存的数据进行加密处理
3、加密解密：只需要简单配置，就可以实现缓存数据的加密解密功能
4、长期有效：对于不需要过期的数据，只要不手动清理可以长期有效
5、扩展性强：可以根据自己的需求直接进行代码的调整，简单易懂易扩展

本地缓存

1、Vue、Html5 的数据缓存可以存放到localStorage 、cookie 或者 sessionStorage 中
2、uniApp、和 微信小程序 的数据缓存可以使用自带的API uni.setStorageSync

缓存的缺点

1、无论localStorage、cookie、sessionStorage 还是 uni.setStorageSync 都没有过期时间的限制
2、不能对数据进行实时的加解密处理，或者加解密扩展性差
3、对于大量旧的缓存数据还要手动处理，不能实时的去除旧数据

简单封装

代码以uniApp 为例，先实现可以添加过期时间的功能

缓存工具类：cacheUtil.js

const expiration = 1000 * 60 * 60 * 24 * 7; // 默认有效期7天
const keyPrefix = 'KEY_'; // 缓存key的统一前缀
import {
   
    isEmpty, isNumberStr, trimAllBlank } from './utils.js';

/**
 * 添加缓存
 * @param {String} key 缓存的key
 * @param {Object} val 缓存的val
 * @param {Number} expire 过期时间（单位：秒）
 * @returns {Boolean} 成功 | 失败
 */
export const setCache = (key, val, expire) => {
   
   
  if (isEmpty(key)) return false;
  expire = expire && isNumberStr(expire) ? Number(trimAllBlank(expire)) : 0;
  expire = Date.now() + (expire <= 0 ? expiration : (expire * 1000));
  let param = JSON.stringify({
   
   
    data: val, // 缓存的数据
    expire: expire // 过期时间
  });
  key = keyPrefix + key; // 缓存的key
  uni.setStorageSync(key, param); // 同步缓存
  return true;
}

/**
 * 获取缓存的数据
 * @param {String} key 缓存key
 * @returns {Object}
 */
export const getCache = (key) => {
   
   
  if (isEmpty(key)) return {
   
   };
  key = keyPrefix + key;
  let value = uni.getStorageSync(key) || '';
  if (value.includes('data') && value.includes('expire')) {
   
   
    value = JSON.parse(value) || {
   
   };
    let expire = value.expire || '';
    if (isEmpty(expire) || !isNumberStr(expire)) {
   
   
      return value.data || '';
    }
    expire = Number(expire) || 0;
    if (expire < Date.now()) {
   
   
      removeKeys(key);
      return {
   
   };
    }
  }
  return value.data;
}

/**
 * 获取缓存有效时长，单位：秒
 * @param {String} key 缓存的key
 * @param {Number} unit 0：毫秒，1：秒，2：分钟，默认毫秒值
 * @returns {Number} 有效时长
 */
export const getExpire = (key, unit) => {
   
   
  if (isEmpty(key)) return 0;
  key = keyPrefix + key;
  let value = uni.getStorageSync(key) || '';
  if (value.includes('data') && value.includes('expire')) {
   
   
    value = JSON.parse(value) || {
   
   };
    let expire = Number(value.expire || 0);
    if (unit === 1) return expire / 1000;
    if (unit === 2) return expire / 1000 / 60;
    return expire;
  }
  return 0;
}

/**
 * 给缓存设置过期时间
 * @param {String} key 缓存数据的key
 * @param {Number} expire 过期时长（单位：秒）
 */
export const setExpire = (key, expire) => {
   
   
  let value = getCache(key) || {
   
   };
  setCache(key, value, expire);
}

/**
 * 删除缓存数据
 * @param keys 删除缓存，多个key之间使用,隔开
 * @returns {Number} 删除条数
 */
export const removeKeys = (...keys) => {
   
   
  if (isEmpty(keys)) return 0;
  keys.forEach((key, index) => {
   
   
    key = keyPrefix + key;
    uni.removeStorageSync(key); // 同步删除
  });
  return keys.length;
}

/**
 * 清空所有缓存
 */
export const clearAll = () => {
   
   
  uni.clearStorageSync(); // 同步清除
}

数据加解密

我这里使用的使用非对称加密，根据个人项目需求可进行调整

加解密工具类：jsencryptUtil.js

import JSEncrypt from 'jsencrypt/bin/jsencrypt.min';
const encryptor = new JSEncrypt();
const publicKey