Client-Side API Response Caching with LocalStorage

const CACHE_KEY_PREFIX = 'api_cache_';
const CACHE_EXPIRATION_TIME = 5 * 60 * 1000; // 5 minutes in milliseconds

async function fetchWithCache(url, options = {}) {
  const cacheKey = CACHE_KEY_PREFIX + url;
  const cachedData = localStorage.getItem(cacheKey);

  if (cachedData) {
    const { timestamp, data } = JSON.parse(cachedData);
    if (Date.now() - timestamp < CACHE_EXPIRATION_TIME) {
      console.log('Returning cached data for:', url);
      return data; // Return cached data if not expired
    } else {
      console.log('Cached data expired for:', url);
      localStorage.removeItem(cacheKey); // Remove expired cache
    }
  }

  console.log('Fetching fresh data for:', url);
  try {
    const response = await fetch(url, options);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const freshData = await response.json();
    
    // Cache the fresh data with a timestamp
    const dataToCache = {
      timestamp: Date.now(),
      data: freshData
    };
    localStorage.setItem(cacheKey, JSON.stringify(dataToCache));
    
    return freshData;
  } catch (error) {
    console.error('Error fetching data with cache:', error);
    throw error;
  }
}

// Example Usage:
// fetchWithCache('https://api.example.com/products')
//   .then(data => console.log('Products:', data))
//   .catch(error => console.error('Failed to get products:', error));

// fetchWithCache('https://api.example.com/users/1');