前端缓存策略实战：从本地存储到 Service Worker

问题很明显：数据无法过期，存储空间无限增长，且键名不规范容易导致覆盖或读取错误。

实践方案：构建缓存管理系统

要解决上述问题，我们需要封装一个统一的缓存管理类。它负责数据的存储、过期检查以及异常处理。

1. 自定义 CacheManager

这个类提供了基础的增删改查功能，并内置了过期逻辑。

// 正确的做法：完整的缓存策略
class CacheManager {
    constructor() {
        this.cachePrefix = 'app_cache_';
        this.defaultExpiry = 24 * 60 * 60 * 1000; // 默认 24 小时
    }

    // 生成缓存键
    generateKey(key) {
        return `${this.cachePrefix}${key}`;
    }

    // 存储数据到缓存
    set(key, data, expiry = this.defaultExpiry) {
        const cacheItem = {
            data,
            expiry: Date.now() + expiry,
            timestamp: Date.now()
        };
        try {
            localStorage.setItem(this.generateKey(key), JSON.stringify(cacheItem));
        } catch (error) {
            console.error('Cache storage error:', error);
            // 处理存储空间不足的情况
            this.clearOldCache();
        }
    }

    // 从缓存获取数据
    get(key) {
        const cacheItem = localStorage.getItem(this.generateKey(key));
        if (!cacheItem) {
            return null;
        }
        try {
            const parsedItem = JSON.parse(cacheItem);
            // 检查是否过期
            if (Date.now() > parsedItem.expiry) {
                this.remove(key);
                return null;
            }
            return parsedItem.data;
        } catch (error) {
            console.error('Cache parsing error:', error);
            this.remove(key);
            return null;
        }
    }

    // 移除缓存
    remove(key) {
        localStorage.removeItem(this.generateKey(key));
    }

    // 清空所有缓存
    clear() {
        Object.keys(localStorage).forEach(key => {
            if (key.startsWith(this.cachePrefix)) {
                localStorage.removeItem(key);
            }
        });
    }

    // 清理过期缓存
    clearOldCache() {
        Object.keys(localStorage).forEach(key => {
            if (key.startsWith(this.cachePrefix)) {
                try {
                    const item = JSON.parse(localStorage.getItem(key));
                    if (Date.now() > item.expiry) {
                        localStorage.removeItem(key);
                    }
                } catch (error) {
                    localStorage.removeItem(key);
                }
            }
        });
    }

    // 获取缓存大小
    getCacheSize() {
        let size = 0;
        Object.keys(localStorage).forEach(key => {
            if (key.startsWith(this.cachePrefix)) {
                size += localStorage.getItem(key).length;
            }
        });
        return size;
    }
}

2. 使用 Service Worker 缓存资源

对于静态资源和 API 响应，Service Worker 是更好的选择。它能拦截网络请求，实现离线优先（Offline First）策略。

以下是一个基础的 Service Worker 示例，用于缓存应用的核心资产。

// service-worker.js
const CACHE_NAME = 'app-cache-v1';
const ASSETS_TO_CACHE = [
    '/',
    '/index.html',
    '/manifest.json',
    '/static/js/main.js',
    '/static/css/main.css',
    '/static/images/logo.png'
];

// 安装 Service Worker
self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(cache => {
                console.log('Opened cache');
                return cache.addAll(ASSETS_TO_CACHE);
            })
    );
});

// 激活 Service Worker
self.addEventListener('activate', event => {
    const cacheWhitelist = [CACHE_NAME];
    event.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames.map(cacheName => {
                    if (cacheWhitelist.indexOf(cacheName) === -1) {
                        return caches.delete(cacheName);
                    }
                })
            );
        })
    );
});

// 拦截网络请求
self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request)
            .then(response => {
                // 如果缓存中有响应，直接返回
                if (response) {
                    return response;
                }
                // 否则发起网络请求
                return fetch(event.request)
                    .then(response => {
                        // 如果响应有效，缓存一份
                        if (response && response.status === 200 && response.type === 'basic') {
                            const responseToCache = response.clone();
                            caches.open(CACHE_NAME)
                                .then(cache => {
                                    cache.put(event.request, responseToCache);
                                });
                        }
                        return response;
                    });
            })
    );
});

3. 结合 API 请求缓存

在实际业务中，我们可以将 CacheManager 与 fetch 结合，实现 API 数据的智能缓存。

// 正确的做法：API 请求缓存
async function fetchWithCache(url, options = {}) {
    const cacheKey = `api_${url}_${JSON.stringify(options)}`;
    const cacheManager = new CacheManager();

    // 尝试从缓存获取
    const cachedData = cacheManager.get(cacheKey);
    if (cachedData) {
        return cachedData;
    }

    // 发起网络请求
    const response = await fetch(url, options);
    const data = await response.json();

    // 缓存数据，设置 5 分钟过期
    cacheManager.set(cacheKey, data, 5 * 60 * 1000);
    return data;
}

最佳实践总结

缓存不是越多越好，而是要合理使用。以下是几个关键建议：

• localStorage：适合存储小量、不敏感的数据。
• sessionStorage：适合存储会话期间的临时数据。
• IndexedDB：适合存储大量结构化数据。
• Service Worker：适合缓存静态资源和 API 响应，支持离线场景。
• 缓存策略：合理设置过期时间，定期清理过期缓存。
• 缓存键管理：使用统一的命名规范，避免缓存键冲突。
• 错误处理：处理存储空间不足等异常情况，防止应用崩溃。
• 性能监控：监控缓存命中率，不断优化缓存策略。

前端缓存是性能优化的重要组成部分。通过构建完善的缓存系统，你的网站不仅能飞起来，还能在弱网环境下保持稳定。