深入剖析前端缓存工具类LocalCache：高效管理数据的利器

深入剖析前端缓存工具类：高效管理数据的利器

引言

在前端开发中，缓存是提升应用性能、减少服务器压力的关键技术之一。合理利用缓存可以显著减少不必要的网络请求，加快页面加载速度，提升用户体验。本文将详细介绍一个实用的前端缓存工具类 LocalCache，探讨其实现原理、功能特点以及使用方法。

缓存工具类概述

LocalCache 是一个封装了本地存储（localStorage 或 sessionStorage）和 cookie 操作的工具类，它提供了简洁的 API 来设置、读取、删除和清空缓存数据，同时支持设置缓存的过期时间。该工具类的主要特点包括：

• 灵活的前缀键：可以为每个缓存项添加自定义的前缀键，避免不同项目或模块之间的缓存冲突。
• 过期时间支持：允许为每个缓存项设置过期时间，过期后自动失效，确保数据的时效性。
• 多种存储方式：支持 localStorage 和 sessionStorage，可根据实际需求选择合适的存储方式。
• Cookie 操作：提供了设置、读取、删除和清空 cookie 的功能，方便处理用户身份验证等信息。

核心代码解析

常量与类定义

/**
 * 默认缓存期限为7天
 */
const DEFAULT_CACHE_TIME = 60 * 60 * 24 * 7;

/**
 * 本地缓存类
 * @class LocalCache
 */
class LocalCache {
  private storage: Storage;
  private readonly prefixKey: string;

  constructor({
    prefixKey = "APP-",
    storage = localStorage
  }: { prefixKey?: string; storage?: Storage } = {}) {
    this.storage = storage;
    this.prefixKey = prefixKey.toUpperCase();
  }

  private getKey(key: string): string {
    return `${this.prefixKey}${key}`;
  }
}

• DEFAULT_CACHE_TIME：定义了默认的缓存期限为 7 天（以秒为单位）。
• LocalCache 类：封装了本地存储和 cookie 操作的核心逻辑。
  • storage：存储对象，默认为 localStorage。
  • prefixKey：缓存键的前缀，用于区分不同项目或模块的缓存。
  • getKey 方法：生成带有前缀的完整缓存键。

设置缓存

/**
 * @description 设置缓存
 * @param {string} key 缓存键
 * @param {*} value 缓存值
 * @param {number | null} expire 过期时间（秒）
 */
set(
  key: string,
  value: any,
  expire: number | null = DEFAULT_CACHE_TIME
): void {
  const stringData = JSON.stringify({
    value,
    expire: expire !== null ? Date.now() + expire * 1000 : null
  });
  this.storage.setItem(this.getKey(key), stringData);
}

• set 方法：用于设置缓存项。
  • key：缓存键。
  • value：缓存值。
  • expire：过期时间（秒），默认为 7 天。
  • 将缓存值和过期时间封装成一个对象，并使用 JSON.stringify 转换为字符串，然后存储到本地存储中。

读取缓存

/**
 * 读取缓存
 * @param {string} key 缓存键
 * @param {*=} def 默认值
 * @returns {*}
 */
get<T = any>(key: string, def: T = null): T {
  const item = this.storage.getItem(this.getKey(key));
  if (item) {
    try {
      const data = JSON.parse(item);
      const { value, expire } = data;
      // 在有效期内直接返回
      if (expire === null || expire >= Date.now()) {
        return value;
      }
      this.remove(key);
    } catch (e) {
      console.error("读取缓存错误:", e);
      return def;
    }
  }
  return def;
}

• get 方法：用于读取缓存项。
  • key：缓存键。
  • def：默认值，当缓存不存在或已过期时返回。
  • 读取缓存项后，解析存储的 JSON 数据，检查过期时间。如果未过期，则返回缓存值；否则，删除该缓存项并返回默认值。

删除缓存

/**
 * 从缓存删除某项
 * @param {string} key
 */
remove(key: string): void {
  console.log(`${this.getKey(key)} 删除缓存`);
  this.storage.removeItem(this.getKey(key));
}

/**
 * 清空所有缓存
 */
clear(): void {
  this.storage.clear();
}

• remove 方法：根据缓存键删除指定的缓存项。
• clear 方法：清空所有缓存项。

Cookie 操作

/**
 * 设置cookie
 * @param {string} name cookie 名称
 * @param {*} value cookie 值
 * @param {number | null} expire 过期时间（秒）
 * 如果过期时间为设置，默认关闭浏览器自动删除
 */
setCookie(
  name: string,
  value: any,
  expire: number | null = DEFAULT_CACHE_TIME
): void {
  const expires = expire !== null ? `; Max-Age=${expire}` : "";
  document.cookie = `${this.getKey(name)}=${encodeURIComponent(value)}${expires}`;
}

/**
 * 根据名字获取cookie值
 * @param {string} name
 * @returns {string}
 */
getCookie(name: string): string {
  const cookieArr = document.cookie.split("; ");
  for (let i = 0, length = cookieArr.length; i < length; i++) {
    const [cookieName, cookieValue] = cookieArr[i].split("=");
    if (cookieName === this.getKey(name)) {
      return decodeURIComponent(cookieValue);
    }
  }
  return "";
}

/**
 * 根据名字删除指定的cookie
 * @param {string} key
 */
removeCookie(key: string): void {
  this.setCookie(key, "", -1);
}

/**
 * 清空cookie，使所有cookie失效
 */
clearCookie(): void {
  const keys = document.cookie.match(/[^ =;]+(?==)/g);
  if (keys) {
    for (const key of keys) {
      document.cookie = `${key}=0;expire=${new Date(0).toUTCString()}`;
    }
  }
}

• setCookie 方法：设置 cookie，支持设置过期时间。
• getCookie 方法：根据 cookie 名称获取 cookie 值。
• removeCookie 方法：根据 cookie 名称删除指定的 cookie。
• clearCookie 方法：清空所有 cookie。

创建缓存对象

/**
 * 创建本地缓存对象
 * @param {string=} prefixKey -
 * @param {Object} [storage=localStorage] - sessionStorage | localStorage
 * @returns {LocalCache}
 */
export const createStorage = ({
  prefixKey = "APP-",
  storage = localStorage
}: { prefixKey?: string; storage?: Storage } = {}): LocalCache => {
  return new LocalCache({ prefixKey, storage });
};

export const localStorage = createStorage();

export default localStorage ;

• createStorage 函数：用于创建 LocalCache 实例，可以自定义前缀键和存储方式。
• finkLocalStorage：默认的 LocalCache 实例，使用 localStorage 作为存储方式。

使用示例

import localStorage from './LocalCache';

// 设置缓存
localStorage.set('userInfo', { name: 'John', age: 30 }, 3600); // 缓存 1 小时

// 读取缓存
const userInfo = localStorage.get('userInfo');
console.log(userInfo);

// 删除缓存
localStorage.remove('userInfo');

// 设置 cookie
localStorage.setCookie('token', 'abc123', 86400); // 缓存 1 天

// 读取 cookie
const token = localStorage.getCookie('token');
console.log(token);

// 删除 cookie
localStorage.removeCookie('token');

// 清空所有缓存和 cookie
localStorage.clear();
localStorage.clearCookie();

总结

LocalCache 工具类为前端开发提供了一种简单、高效的缓存管理解决方案。通过封装本地存储和 cookie 操作，它简化了缓存的设置、读取、删除和清空过程，同时支持设置过期时间，确保数据的时效性。在实际项目中，合理使用该工具类可以有效提升应用的性能和用户体验。希望本文对你理解和使用前端缓存工具类有所帮助。