// 存儲數(shù)據(jù)（注意：只能存字符串）
localStorage.setItem('user', JSON.stringify({ name: 'Alice' }));

// 讀取數(shù)據(jù)
const user = JSON.parse(localStorage.getItem('user'));

// 刪除數(shù)據(jù)
localStorage.removeItem('user');

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;
}

// 打開數(shù)據(jù)庫
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 });
};

// 存儲數(shù)據(jù)
function saveToIndexedDB(url, data) {
  const transaction = db.transaction('apiCache', 'readwrite');
  const store = transaction.objectStore('apiCache');
  store.put({ url, data, timestamp: Date.now() });
}

// 查詢數(shù)據(jù)
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);
  });
}

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;
}

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);
  }
}

// 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;
        });
      })
    );
  }
});

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分鐘保留時間
    });
  // ...
}

import useSWR from 'swr';

function Profile() {
  const { data } = useSWR('/api/user', fetcher, {
    revalidateOnFocus: false, // 窗口聚焦時不刷新
    dedupingInterval: 60000   // 60秒內(nèi)相同請求去重
  });
  // ...
}