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

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

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

1. 使用 localStorage 实现持久缓存

1. const Cache = {
2.   /**
3.    * 设置缓存
4.    * @param {string} key - 缓存键
5.    * @param {*} value - 缓存值
6.    * @param {number} ttl - 缓存时间（毫秒）
7.    */
8.   set(key, value, ttl) {
9.     const data = {
10.       value,
11.       expiry: ttl ? Date.now() + ttl : null, // 计算过期时间
12.     };
13.     localStorage.setItem(key, JSON.stringify(data));
14.   },
16.   /**
17.    * 获取缓存
18.    * @param {string} key - 缓存键
19.    * @returns {*} 缓存值或 null（如果过期或不存在）
20.    */
21.   get(key) {
22.     const data = localStorage.getItem(key);
23.     if (!data) return null;
25.     try {
26.       const { value, expiry } = JSON.parse(data);
27.       if (expiry && Date.now() > expiry) {
28.         localStorage.removeItem(key); // 过期删除缓存
29.         return null;
30.       }
31.       return value;
32.     } catch (e) {
33.       console.warn("缓存数据解析失败", e);
34.       return null;
35.     }
36.   },
38.   /**
39.    * 删除缓存
40.    * @param {string} key - 缓存键
41.    */
42.   remove(key) {
43.     localStorage.removeItem(key);
44.   },
46.   /**
47.    * 清空所有缓存
48.    */
49.   clear() {
50.     localStorage.clear();
51.   },
52. };
54. // 使用示例
55. Cache.set("username", "Alice", 5000); // 设置缓存5秒后过期
56. console.log(Cache.get("username")); // 5秒内返回 'Alice'
57. setTimeout(() => console.log(Cache.get("username")), 6000); // 6秒后返回 null

复制代码

⚠️ 注意事项

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

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

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

1. const SessionCache = {
2.   /**
3.    * 设置缓存
4.    * @param {string} key - 缓存键
5.    * @param {*} value - 缓存值
6.    * @param {number} ttl - 缓存时间（毫秒）
7.    */
8.   set(key, value, ttl) {
9.     const data = {
10.       value,
11.       expiry: ttl ? Date.now() + ttl : null, // 计算过期时间
12.     };
13.     sessionStorage.setItem(key, JSON.stringify(data));
14.   },
16.   /**
17.    * 获取缓存
18.    * @param {string} key - 缓存键
19.    * @returns {*} 缓存值或 null（如果过期或不存在）
20.    */
21.   get(key) {
22.     const data = sessionStorage.getItem(key);
23.     if (!data) return null;
25.     try {
26.       const { value, expiry } = JSON.parse(data);
27.       if (expiry && Date.now() > expiry) {
28.         sessionStorage.removeItem(key); // 缓存已过期，删除
29.         return null;
30.       }
31.       return value;
32.     } catch (e) {
33.       console.warn("缓存数据解析失败:", e);
34.       return null;
35.     }
36.   },
38.   /**
39.    * 删除缓存
40.    * @param {string} key - 缓存键
41.    */
42.   remove(key) {
43.     sessionStorage.removeItem(key);
44.   },
46.   /**
47.    * 清空所有缓存
48.    */
49.   clear() {
50.     sessionStorage.clear();
51.   },
52. };
54. // **使用示例**
55. // 设置缓存，5秒后过期
56. SessionCache.set("userToken", "abc123", 5000);
58. // 获取缓存
59. console.log(SessionCache.get("userToken")); // 5秒内返回 'abc123'
61. // 5秒后尝试获取缓存
62. setTimeout(() => {
63.   console.log(SessionCache.get("userToken")); // 返回 null
64. }, 6000);

复制代码

⚠️ 注意事项

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

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

1. class MemoryCache {
2.   constructor() {
3.     this.cache = new Map();
4.   }
6.   /**
7.    * 设置缓存
8.    * @param {string} key - 缓存键
9.    * @param {*} value - 缓存值
10.    * @param {number} ttl - 缓存时间（毫秒）
11.    */
12.   set(key, value, ttl) {
13.     const expiry = ttl ? Date.now() + ttl : null;
14.     this.cache.set(key, { value, expiry });
15.   }
17.   /**
18.    * 获取缓存
19.    * @param {string} key - 缓存键
20.    * @returns {*} 缓存值或 null（如果过期或不存在）
21.    */
22.   get(key) {
23.     const item = this.cache.get(key);
24.     if (!item) return null;
26.     if (item.expiry && Date.now() > item.expiry) {
27.       this.cache.delete(key); // 缓存过期，删除
28.       return null;
29.     }
30.     return item.value;
31.   }
33.   /**
34.    * 删除缓存
35.    * @param {string} key - 缓存键
36.    */
37.   remove(key) {
38.     this.cache.delete(key);
39.   }
41.   /**
42.    * 清空所有缓存
43.    */
44.   clear() {
45.     this.cache.clear();
46.   }
47. }
49. // 使用示例
50. const memCache = new MemoryCache();
51. memCache.set("token", "abc123", 3000); // 设置缓存3秒后过期
52. console.log(memCache.get("token")); // 3秒内返回 'abc123'
53. setTimeout(() => console.log(memCache.get("token")), 4000); // 4秒后返回 null

复制代码

4. 使用 IndexedDB 实现持久缓存（支持二进制数据）

1. // 初始化 IndexedDB 数据库
2. class IndexedDBCache {
3.   constructor(dbName = "CacheDB", storeName = "CacheStore") {
4.     this.dbName = dbName;
5.     this.storeName = storeName;
6.     this.db = null;
7.   }
9.   /**
10.    * 初始化数据库
11.    */
12.   async init() {
13.     return new Promise((resolve, reject) => {
14.       const request = indexedDB.open(this.dbName, 1);
16.       request.onupgradeneeded = (event) => {
17.         const db = event.target.result;
18.         if (!db.objectStoreNames.contains(this.storeName)) {
19.           db.createObjectStore(this.storeName, { keyPath: "key" });
20.         }
21.       };
23.       request.onsuccess = (event) => {
24.         this.db = event.target.result;
25.         resolve(this);
26.       };
28.       request.onerror = (event) => {
29.         console.error("IndexedDB 初始化失败:", event.target.error);
30.         reject(event.target.error);
31.       };
32.     });
33.   }
35.   /**
36.    * 获取对象存储
37.    */
38.   getObjectStore(mode = "readonly") {
39.     const transaction = this.db.transaction(this.storeName, mode);
40.     return transaction.objectStore(this.storeName);
41.   }
43.   /**
44.    * 添加或更新缓存
45.    * @param {string} key - 缓存键
46.    * @param {*} value - 缓存值
47.    * @param {number} ttl - 过期时间（毫秒）
48.    */
49.   async set(key, value, ttl) {
50.     const expiry = ttl ? Date.now() + ttl : null;
51.     const record = { key, value, expiry };
53.     return new Promise((resolve, reject) => {
54.       const store = this.getObjectStore("readwrite");
55.       const request = store.put(record);
57.       request.onsuccess = () => resolve(true);
58.       request.onerror = (event) => {
59.         console.error("数据写入失败:", event.target.error);
60.         reject(event.target.error);
61.       };
62.     });
63.   }
65.   /**
66.    * 获取缓存
67.    * @param {string} key - 缓存键
68.    * @returns {*} 缓存值或 null
69.    */
70.   async get(key) {
71.     return new Promise((resolve, reject) => {
72.       const store = this.getObjectStore("readonly");
73.       const request = store.get(key);
75.       request.onsuccess = (event) => {
76.         const record = event.target.result;
77.         if (!record) {
78.           resolve(null); // 数据不存在
79.           return;
80.         }
82.         if (record.expiry && Date.now() > record.expiry) {
83.           // 数据过期
84.           this.delete(key).then(() => resolve(null));
85.         } else {
86.           resolve(record.value); // 返回未过期数据
87.         }
88.       };
90.       request.onerror = (event) => {
91.         console.error("数据读取失败:", event.target.error);
92.         reject(event.target.error);
93.       };
94.     });
95.   }
97.   /**
98.    * 删除缓存
99.    * @param {string} key - 缓存键
100.    */
101.   async delete(key) {
102.     return new Promise((resolve, reject) => {
103.       const store = this.getObjectStore("readwrite");
104.       const request = store.delete(key);
106.       request.onsuccess = () => resolve(true);
107.       request.onerror = (event) => {
108.         console.error("数据删除失败:", event.target.error);
109.         reject(event.target.error);
110.       };
111.     });
112.   }
114.   /**
115.    * 清空缓存
116.    */
117.   async clear() {
118.     return new Promise((resolve, reject) => {
119.       const store = this.getObjectStore("readwrite");
120.       const request = store.clear();
122.       request.onsuccess = () => resolve(true);
123.       request.onerror = (event) => {
124.         console.error("缓存清空失败:", event.target.error);
125.         reject(event.target.error);
126.       };
127.     });
128.   }
129. }
131. // 使用示例
132. (async () => {
133.   // 创建缓存实例并初始化数据库
134.   const cache = new IndexedDBCache();
135.   await cache.init();
137.   // 设置缓存，数据 5 秒后过期
138.   await cache.set("userToken", "abc123", 5000);
139.   console.log("缓存设置完成");
141.   // 缓存二进制数据
142.   const binaryData = new Blob(["Hello, IndexedDB"], { type: "text/plain" });
143.   await cache.set("binary", binaryData, 5000);
145.   // 获取缓存
146.   console.log("立即获取:", await cache.get("userToken")); // 输出: abc123
147.   console.log("立即获取:", await cache.get("binary"));
149.   // 等待 6 秒后尝试获取缓存
150.   setTimeout(async () => {
151.     console.log("6 秒后获取:", await cache.get("userToken")); // 输出: null
152.     console.log("6 秒后获取:", await cache.get("binary")); // 输出: null
153.   }, 6000);
154. })();

复制代码

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！