JavaScript 实现带过期时间的数据缓存方案

const Cache = {
  /**
   * 设置缓存
   * @param {string} key - 缓存键
   * @param {*} value - 缓存值
   * @param {number} ttl - 缓存时间（毫秒）
   */
  set(key, value, ttl) {
    const data = {
      value,
      expiry: ttl ? Date.now() + ttl : null, // 计算过期时间
    };
    localStorage.setItem(key, JSON.stringify(data));
  },
 
  /**
   * 获取缓存
   * @param {string} key - 缓存键
   * @returns {*} 缓存值或 null（如果过期或不存在）
   */
  get(key) {
    const data = localStorage.getItem(key);
    if (!data) return null;
 
    try {
      const { value, expiry } = JSON.parse(data);
      if (expiry && Date.now() > expiry) {
        localStorage.removeItem(key); // 过期删除缓存
        return null;
      }
      return value;
    } catch (e) {
      console.warn("缓存数据解析失败", e);
      return null;
    }
  },
 
  /**
   * 删除缓存
   * @param {string} key - 缓存键
   */
  remove(key) {
    localStorage.removeItem(key);
  },
 
  /**
   * 清空所有缓存
   */
  clear() {
    localStorage.clear();
  },
};
 
// 使用示例
Cache.set("username", "Alice", 5000); // 设置缓存5秒后过期
console.log(Cache.get("username")); // 5秒内返回 'Alice'
setTimeout(() => console.log(Cache.get("username")), 6000); // 6秒后返回 null

const SessionCache = {
  /**
   * 设置缓存
   * @param {string} key - 缓存键
   * @param {*} value - 缓存值
   * @param {number} ttl - 缓存时间（毫秒）
   */
  set(key, value, ttl) {
    const data = {
      value,
      expiry: ttl ? Date.now() + ttl : null, // 计算过期时间
    };
    sessionStorage.setItem(key, JSON.stringify(data));
  },
 
  /**
   * 获取缓存
   * @param {string} key - 缓存键
   * @returns {*} 缓存值或 null（如果过期或不存在）
   */
  get(key) {
    const data = sessionStorage.getItem(key);
    if (!data) return null;
 
    try {
      const { value, expiry } = JSON.parse(data);
      if (expiry && Date.now() > expiry) {
        sessionStorage.removeItem(key); // 缓存已过期，删除
        return null;
      }
      return value;
    } catch (e) {
      console.warn("缓存数据解析失败:", e);
      return null;
    }
  },
 
  /**
   * 删除缓存
   * @param {string} key - 缓存键
   */
  remove(key) {
    sessionStorage.removeItem(key);
  },
 
  /**
   * 清空所有缓存
   */
  clear() {
    sessionStorage.clear();
  },
};
 
// **使用示例**
// 设置缓存，5秒后过期
SessionCache.set("userToken", "abc123", 5000);
 
// 获取缓存
console.log(SessionCache.get("userToken")); // 5秒内返回 'abc123'
 
// 5秒后尝试获取缓存
setTimeout(() => {
  console.log(SessionCache.get("userToken")); // 返回 null
}, 6000);

class MemoryCache {
  constructor() {
    this.cache = new Map();
  }
 
  /**
   * 设置缓存
   * @param {string} key - 缓存键
   * @param {*} value - 缓存值
   * @param {number} ttl - 缓存时间（毫秒）
   */
  set(key, value, ttl) {
    const expiry = ttl ? Date.now() + ttl : null;
    this.cache.set(key, { value, expiry });
  }
 
  /**
   * 获取缓存
   * @param {string} key - 缓存键
   * @returns {*} 缓存值或 null（如果过期或不存在）
   */
  get(key) {
    const item = this.cache.get(key);
    if (!item) return null;
 
    if (item.expiry && Date.now() > item.expiry) {
      this.cache.delete(key); // 缓存过期，删除
      return null;
    }
    return item.value;
  }
 
  /**
   * 删除缓存
   * @param {string} key - 缓存键
   */
  remove(key) {
    this.cache.delete(key);
  }
 
  /**
   * 清空所有缓存
   */
  clear() {
    this.cache.clear();
  }
}
 
// 使用示例
const memCache = new MemoryCache();
memCache.set("token", "abc123", 3000); // 设置缓存3秒后过期
console.log(memCache.get("token")); // 3秒内返回 'abc123'
setTimeout(() => console.log(memCache.get("token")), 4000); // 4秒后返回 null