前端数据缓存机制是提升应用性能、减少网络请求、优化用户体验的关键技术手段。以下是前端常见的数据缓存方案及其实现细节，涵盖浏览器缓存、本地存储、内存缓存等多种策略：
1. 浏览器缓存（HTTP 缓存）
通过 HTTP 协议头控制缓存，适用于静态资源（如 JS、CSS、图片）和接口响应。
1.1 强缓存
原理：浏览器直接使用本地缓存，不向服务器发送请求。实现方式：Cache-Control: max-age=3600 # 资源有效期 1 小时（优先级高）
Expires: Wed, 21 Oct 2024 07:28:00 GMT # 过期时间（HTTP/1.0）
1.2 协商缓存
原理：浏览器携带缓存标识询问服务器资源是否更新。实现方式：# 服务器返回标识
ETag: "33a64df551425fcc55e4d42a148795d9"
Last-Modified: Wed, 21 Oct 2024 07:28:00 GMT
# 浏览器请求时携带标识
If-None-Match: "33a64df551425fcc55e4d42a148795d9"
If-Modified-Since: Wed, 21 Oct 2024 07:28:00 GMT
2. Web Storage
适用于存储结构化数据，容量约 5~10MB，分为 localStorage 和 sessionStorage。
2.1 基本使用
// 存储数据（注意：只能存字符串）
localStorage.setItem('user', JSON.stringify({ name: 'Alice' }));
// 读取数据
const user = JSON.parse(localStorage.getItem('user'));
// 删除数据
localStorage.removeItem('user');
2.2 缓存策略示例
async function fetchWithCache(url, cacheKey, ttl = 3600) {
const cachedData = localStorage.getItem(cacheKey);
if (cachedData) {
const { data, timestamp } = JSON.parse(cachedData);
if (Date.now() - timestamp < ttl * 1000) {
return data; // 返回有效缓存
}
}
const response = await fetch(url);
const newData = await response.json();
localStorage.setItem(cacheKey, JSON.stringify({
data: newData,
timestamp: Date.now()
}));
return newData;
}
3. IndexedDB
适用于存储大量结构化数据（支持索引、事务），容量可达数百 MB。
3.1 基本操作
// 打开数据库
const request = indexedDB.open('myDB', 1);
request.onupgradeneeded = (event) => {
const db = event.target.result;
const store = db.createObjectStore('apiCache', { keyPath: 'url' });
store.createIndex('timestamp', 'timestamp', { unique: false });
};
// 存储数据
function saveToIndexedDB(url, data) {
const transaction = db.transaction('apiCache', 'readwrite');
const store = transaction.objectStore('apiCache');
store.put({ url, data, timestamp: Date.now() });
}
// 查询数据
async function getFromIndexedDB(url) {
return new Promise((resolve) => {
const transaction = db.transaction('apiCache', 'readonly');
const store = transaction.objectStore('apiCache');
const request = store.get(url);
request.onsuccess = (e) => resolve(e.target.result?.data);
});
}
4. 内存缓存
适用于单页应用（SPA）中短期数据缓存，随页面刷新失效。
4.1 全局变量缓存
const memoryCache = new Map();
async function fetchWithMemoryCache(url) {
if (memoryCache.has(url)) {
return memoryCache.get(url);
}
const response = await fetch(url);
const data = await response.json();
memoryCache.set(url, data);
return data;
}
4.2 LRU 缓存策略
class LRUCache {
constructor(maxSize = 100) {
this.cache = new Map();
this.maxSize = maxSize;
}
get(key) {
if (!this.cache.has(key)) return null;
const value = this.cache.get(key);
this.cache.delete(key);
this.cache.set(key, value);
return value;
}
set(key, value) {
if (this.cache.size >= this.maxSize) {
const oldestKey = this.cache.keys().next().value;
this.cache.delete(oldestKey);
}
this.cache.set(key, value);
}
}
5. Service Worker 缓存
实现离线缓存和网络请求拦截，适合 PWA 应用。
5.1 缓存接口数据
// sw.js
self.addEventListener('fetch', (event) => {
if (event.request.url.includes('/api/')) {
event.respondWith(
caches.match(event.request).then((cachedResponse) => {
return cachedResponse || fetch(event.request).then((response) => {
const clone = response.clone();
caches.open('api-cache-v1').then((cache) => {
cache.put(event.request, clone);
});
return response;
});
})
);
}
});
6. 现代框架缓存方案
6.1 React Query
import { useQuery } from 'react-query';
function UserProfile() {
const { data } = useQuery('userData', () =>
fetch('/api/user').then(res => res.json()), {
staleTime: 5 * 60 * 1000, // 5分钟缓存有效期
cacheTime: 30 * 60 * 1000 // 30分钟保留时间
});
// ...
}
6.2 SWR (Stale-While-Revalidate)
import useSWR from 'swr';
function Profile() {
const { data } = useSWR('/api/user', fetcher, {
revalidateOnFocus: false, // 窗口聚焦时不刷新
dedupingInterval: 60000 // 60秒内相同请求去重
});
// ...
}
7. 缓存策略关键问题处理
7.1 缓存失效
时间戳失效：存储数据时记录时间戳，定期检查过期版本号控制：缓存键名包含版本号（如 user-v2）主动清除：当数据变更时触发缓存更新
7.2 缓存一致性
数据更新广播：通过 WebSocket 或 EventSource 通知前端更新缓存手动刷新机制：提供用户手动刷新按钮（如 pull-to-refresh）
7.3 敏感数据处理
避免缓存隐私数据（如 token、密码）使用 sessionStorage 替代 localStorage 存储会话数据
缓存方案选型建议
场景推荐方案容量有效期静态资源HTTP 强缓存无上限长期低频变动的接口数据localStorage5~10MB自定义大量结构化数据IndexedDB数百MB长期实时性要求高的数据内存缓存内存限制页面会话离线优先应用Service Worker50~250MB自定义
最佳实践
分层缓存：结合 HTTP 缓存 + 内存缓存 + 持久化存储缓存降级：优先从内存读取，其次本地存储，最后网络请求监控指标：跟踪缓存命中率、存储使用量、数据新鲜度安全清理：定时清理过期缓存，避免存储空间溢出
通过合理设计缓存机制，可显著提升前端性能，但在实际应用中需平衡以下关系：
✅ 新鲜度 vs 性能
✅ 存储空间 vs 用户体验
✅ 开发成本 vs 维护成本