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

三种方式对比