js 缓存

// 使用 localStorage 进行简单的缓存示例

// 保存数据到缓存
function setCache(key, value) {
    localStorage.setItem(key, JSON.stringify(value));
}

// 从缓存中获取数据
function getCache(key) {
    const cachedData = localStorage.getItem(key);
    return cachedData ? JSON.parse(cachedData) : null;
}

// 示例：缓存一个 API 请求的结果
async function fetchAndCacheData(url, cacheKey) {
    // 先尝试从缓存中获取数据
    let data = getCache(cacheKey);

    if (data) {
        console.log('从缓存中获取数据:', data);
        return data;
    }

    // 如果缓存中没有数据，则发起网络请求
    try {
        const response = await fetch(url);
        data = await response.json();

        // 将获取到的数据保存到缓存中
        setCache(cacheKey, data);
        console.log('从网络获取数据并缓存:', data);
        return data;
    } catch (error) {
        console.error('请求失败:', error);
        return null;
    }
}

// 使用示例
fetchAndCacheData('https://api.example.com/data', 'exampleData');

解释说明：

1. setCache 函数：用于将数据保存到浏览器的 localStorage 中。由于 localStorage 只能存储字符串，因此我们使用 JSON.stringify 将对象或数组转换为字符串。

2. getCache 函数：用于从 localStorage 中读取数据，并通过 JSON.parse 将其转换回原始格式（如对象或数组）。如果缓存中没有数据，则返回 null。

3. fetchAndCacheData 函数：这是一个异步函数，首先尝试从缓存中获取数据。如果有缓存数据，则直接返回；如果没有，则发起网络请求获取数据，并将结果保存到缓存中以便下次使用。

4. 使用示例：调用 fetchAndCacheData 函数时，传入 API 的 URL 和缓存的键名。第一次调用时会发起网络请求并缓存结果，后续调用将直接从缓存中获取数据。