Client-Side API Response Caching in Local Storage

const CACHE_PREFIX = 'api_cache_'; // Prefix for cache keys
const DEFAULT_CACHE_DURATION = 5 * 60 * 1000; // 5 minutes in milliseconds

async function fetchCachedData(url, options = {}, cacheDuration = DEFAULT_CACHE_DURATION) {
    const cacheKey = CACHE_PREFIX + btoa(url + JSON.stringify(options)); // Unique key for URL + options
    const cachedItem = localStorage.getItem(cacheKey);

    if (cachedItem) {
        const { data, timestamp } = JSON.parse(cachedItem);
        if (Date.now() - timestamp < cacheDuration) {
            console.log(`Cache hit for ${url}`);
            return data; // Return cached data if not expired
        } else {
            console.log(`Cache expired for ${url}`);
            localStorage.removeItem(cacheKey); // Remove expired cache
        }
    }

    console.log(`Fetching live data for ${url}`);
    const response = await fetch(url, options);
    if (!response.ok) {
        throw new Error(`API error: ${response.status} ${response.statusText}`);
    }
    const liveData = await response.json();

    // Cache the new data with current timestamp
    localStorage.setItem(cacheKey, JSON.stringify({ data: liveData, timestamp: Date.now() }));
    return liveData;
}

// Usage Example:
/*
(async () => {
    const url = 'https://jsonplaceholder.typicode.com/todos/1';

    // First call - fetches and caches
    let data1 = await fetchCachedData(url, {}, 10 * 1000); // Cache for 10 seconds
    console.log('Data 1:', data1);

    // Second call within 10 seconds - uses cache
    let data2 = await fetchCachedData(url, {}, 10 * 1000);
    console.log('Data 2 (cached):', data2);

    // Wait for cache to expire, then fetch again
    setTimeout(async () => {
        let data3 = await fetchCachedData(url, {}, 10 * 1000);
        console.log('Data 3 (after expiry):', data3);
    }, 12 * 1000); // Wait 12 seconds
})();
*/