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 | 取决于可用内存 |