JavaScript实现支持过期时间的数据缓存功能_Javascript

要在 javascript 中实现数据缓存功能并支持设置过期时间，可以使用 localstorage、sessionstorage 或内存对象（如 map 或普通对象）来存储数据，并为每个缓存项设置一个过期时间。以下是一个简单的实现示例：

javascript 实现支持过期时间的数据缓存功能

1. 使用 localstorage 实现持久缓存

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

注意事项

localstorage 只能存储字符串，因此要使用 json.stringify 和 json.parse 进行序列化和反序列化。
localstorage 的存储空间一般有限（大约 5mb）。
如果是跨页面使用，请确保在相同的域名下。

2. 使用 sessionstorage 实现数据缓存（适合页面级临时存储）

sessionstorage 是一种浏览器存储机制，它的特点是数据仅在页面会话（session）期间有效，页面关闭后数据会被清除。

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);

注意事项

sessionstorage 数据在页面关闭或会话结束时自动清除。
在不同的标签页中，sessionstorage 是独立的（不会共享）。
sessionstorage 的存储空间一般为5mb左右。
数据存储在 sessionstorage 时必须经过 json.stringify 和 json.parse 处理。

3. 使用内存对象实现轻量缓存（适合短期缓存）

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

三种方式对比

特性	localstorage	sessionstorage	内存缓存 (map)
持久性	持久存储，页面刷新或关闭后仍保留	页面会话结束（即关闭页面）时丢失	页面刷新后丢失
共享性	同一域名下所有页面共享	仅当前标签页可用	仅当前标签页可用
性能	读取稍慢（i/o 操作）	读取稍慢（i/o 操作）	更快（内存存取）
适用场景	长期存储、页面级数据	临时存储页面状态、会话数据	短期存储、临时数据
存储大小限制	约 5mb	约 5mb	取决于可用内存