快捷導(dǎo)航

JavaScript實(shí)現(xiàn)支持過(guò)期時(shí)間的數(shù)據(jù)緩存功能

更新時(shí)間：2025年01月07日 11:10:58 作者：飛仔FeiZai

這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實(shí)現(xiàn)支持過(guò)期時(shí)間的數(shù)據(jù)緩存功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考下

要在 JavaScript 中實(shí)現(xiàn)數(shù)據(jù)緩存功能并支持設(shè)置過(guò)期時(shí)間，可以使用 localStorage、sessionStorage 或內(nèi)存對(duì)象（如 Map 或普通對(duì)象）來(lái)存儲(chǔ)數(shù)據(jù)，并為每個(gè)緩存項(xiàng)設(shè)置一個(gè)過(guò)期時(shí)間。以下是一個(gè)簡(jiǎn)單的實(shí)現(xiàn)示例：

JavaScript 實(shí)現(xiàn)支持過(guò)期時(shí)間的數(shù)據(jù)緩存功能

1. 使用 localStorage 實(shí)現(xiàn)持久緩存

const Cache = {
  /**
   * 設(shè)置緩存
   * @param {string} key - 緩存鍵
   * @param {*} value - 緩存值
   * @param {number} ttl - 緩存時(shí)間（毫秒）
   */
  set(key, value, ttl) {
    const data = {
      value,
      expiry: ttl ? Date.now() + ttl : null, // 計(jì)算過(guò)期時(shí)間
    };
    localStorage.setItem(key, JSON.stringify(data));
  },
 
  /**
   * 獲取緩存
   * @param {string} key - 緩存鍵
   * @returns {*} 緩存值或 null（如果過(guò)期或不存在）
   */
  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); // 過(guò)期刪除緩存
        return null;
      }
      return value;
    } catch (e) {
      console.warn("緩存數(shù)據(jù)解析失敗", e);
      return null;
    }
  },
 
  /**
   * 刪除緩存
   * @param {string} key - 緩存鍵
   */
  remove(key) {
    localStorage.removeItem(key);
  },
 
  /**
   * 清空所有緩存
   */
  clear() {
    localStorage.clear();
  },
};
 
// 使用示例
Cache.set("username", "Alice", 5000); // 設(shè)置緩存5秒后過(guò)期
console.log(Cache.get("username")); // 5秒內(nèi)返回 'Alice'
setTimeout(() => console.log(Cache.get("username")), 6000); // 6秒后返回 null

注意事項(xiàng)

localStorage 只能存儲(chǔ)字符串，因此要使用 JSON.stringify 和 JSON.parse 進(jìn)行序列化和反序列化。
localStorage 的存儲(chǔ)空間一般有限（大約 5MB）。
如果是跨頁(yè)面使用，請(qǐng)確保在相同的域名下。

2. 使用 sessionStorage 實(shí)現(xiàn)數(shù)據(jù)緩存（適合頁(yè)面級(jí)臨時(shí)存儲(chǔ)）

sessionStorage 是一種瀏覽器存儲(chǔ)機(jī)制，它的特點(diǎn)是數(shù)據(jù)僅在頁(yè)面會(huì)話（session）期間有效，頁(yè)面關(guān)閉后數(shù)據(jù)會(huì)被清除。

const SessionCache = {
  /**
   * 設(shè)置緩存
   * @param {string} key - 緩存鍵
   * @param {*} value - 緩存值
   * @param {number} ttl - 緩存時(shí)間（毫秒）
   */
  set(key, value, ttl) {
    const data = {
      value,
      expiry: ttl ? Date.now() + ttl : null, // 計(jì)算過(guò)期時(shí)間
    };
    sessionStorage.setItem(key, JSON.stringify(data));
  },
 
  /**
   * 獲取緩存
   * @param {string} key - 緩存鍵
   * @returns {*} 緩存值或 null（如果過(guò)期或不存在）
   */
  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); // 緩存已過(guò)期，刪除
        return null;
      }
      return value;
    } catch (e) {
      console.warn("緩存數(shù)據(jù)解析失敗:", e);
      return null;
    }
  },
 
  /**
   * 刪除緩存
   * @param {string} key - 緩存鍵
   */
  remove(key) {
    sessionStorage.removeItem(key);
  },
 
  /**
   * 清空所有緩存
   */
  clear() {
    sessionStorage.clear();
  },
};
 
// **使用示例**
// 設(shè)置緩存，5秒后過(guò)期
SessionCache.set("userToken", "abc123", 5000);
 
// 獲取緩存
console.log(SessionCache.get("userToken")); // 5秒內(nèi)返回 'abc123'
 
// 5秒后嘗試獲取緩存
setTimeout(() => {
  console.log(SessionCache.get("userToken")); // 返回 null
}, 6000);

注意事項(xiàng)

sessionStorage 數(shù)據(jù)在頁(yè)面關(guān)閉或會(huì)話結(jié)束時(shí)自動(dòng)清除。
在不同的標(biāo)簽頁(yè)中，sessionStorage 是獨(dú)立的（不會(huì)共享）。
sessionStorage 的存儲(chǔ)空間一般為5MB左右。
數(shù)據(jù)存儲(chǔ)在 sessionStorage 時(shí)必須經(jīng)過(guò) JSON.stringify 和 JSON.parse 處理。

3. 使用內(nèi)存對(duì)象實(shí)現(xiàn)輕量緩存（適合短期緩存）

class MemoryCache {
  constructor() {
    this.cache = new Map();
  }
 
  /**
   * 設(shè)置緩存
   * @param {string} key - 緩存鍵
   * @param {*} value - 緩存值
   * @param {number} ttl - 緩存時(shí)間（毫秒）
   */
  set(key, value, ttl) {
    const expiry = ttl ? Date.now() + ttl : null;
    this.cache.set(key, { value, expiry });
  }
 
  /**
   * 獲取緩存
   * @param {string} key - 緩存鍵
   * @returns {*} 緩存值或 null（如果過(guò)期或不存在）
   */
  get(key) {
    const item = this.cache.get(key);
    if (!item) return null;
 
    if (item.expiry && Date.now() > item.expiry) {
      this.cache.delete(key); // 緩存過(guò)期，刪除
      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); // 設(shè)置緩存3秒后過(guò)期
console.log(memCache.get("token")); // 3秒內(nèi)返回 'abc123'
setTimeout(() => console.log(memCache.get("token")), 4000); // 4秒后返回 null

三種方式對(duì)比

特性	localStorage	sessionStorage	內(nèi)存緩存 (Map)
持久性	持久存儲(chǔ)，頁(yè)面刷新或關(guān)閉后仍保留	頁(yè)面會(huì)話結(jié)束（即關(guān)閉頁(yè)面）時(shí)丟失	頁(yè)面刷新后丟失
共享性	同一域名下所有頁(yè)面共享	僅當(dāng)前標(biāo)簽頁(yè)可用	僅當(dāng)前標(biāo)簽頁(yè)可用
性能	讀取稍慢（I/O 操作）	讀取稍慢（I/O 操作）	更快（內(nèi)存存取）
適用場(chǎng)景	長(zhǎng)期存儲(chǔ)、頁(yè)面級(jí)數(shù)據(jù)	臨時(shí)存儲(chǔ)頁(yè)面狀態(tài)、會(huì)話數(shù)據(jù)	短期存儲(chǔ)、臨時(shí)數(shù)據(jù)
存儲(chǔ)大小限制	約 5MB	約 5MB	取決于可用內(nèi)存

到此這篇關(guān)于JavaScript實(shí)現(xiàn)支持過(guò)期時(shí)間的數(shù)據(jù)緩存功能的文章就介紹到這了,更多相關(guān)JavaScript數(shù)據(jù)緩存內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: