当前位置：首页 > JavaScript

js缓存实现

2026-03-14 20:13:18JavaScript

缓存实现方法

使用 localStorage 或 sessionStorage

localStorage 和 sessionStorage 是浏览器提供的 Web Storage API，适合存储键值对数据。localStorage 数据持久化，sessionStorage 数据仅在会话期间有效。

// 存储数据
localStorage.setItem('key', 'value');

// 获取数据
const value = localStorage.getItem('key');

// 删除数据
localStorage.removeItem('key');

使用 Cache API

Cache API 是 Service Worker 的一部分，适合缓存网络请求和响应，常用于 PWA 应用。

// 打开缓存
caches.open('cache-name').then(cache => {
  // 添加缓存
  cache.add('/api/data');

  // 匹配缓存
  cache.match('/api/data').then(response => {
    if (response) {
      // 使用缓存数据
    }
  });
});

使用 IndexedDB

IndexedDB 是一个事务型数据库系统，适合存储大量结构化数据。

// 打开数据库
const request = indexedDB.open('db-name', 1);

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  db.createObjectStore('store-name', { keyPath: 'id' });
};

request.onsuccess = (event) => {
  const db = event.target.result;
  const transaction = db.transaction('store-name', 'readwrite');
  const store = transaction.objectStore('store-name');

  // 添加数据
  store.add({ id: 1, data: 'value' });

  // 获取数据
  store.get(1).onsuccess = (event) => {
    const data = event.target.result;
  };
};

使用内存缓存

内存缓存适合临时存储数据，生命周期与页面一致。

const cache = {};

// 存储数据
cache['key'] = 'value';

// 获取数据
const value = cache['key'];

// 删除数据
delete cache['key'];

使用第三方库

一些第三方库如 lru-cache 提供了更高级的缓存功能，例如 LRU（最近最少使用）策略。

const LRU = require('lru-cache');
const cache = new LRU({ max: 500 });

// 存储数据
cache.set('key', 'value');

// 获取数据
const value = cache.get('key');

// 删除数据
cache.del('key');