JS本地缓存实现方法详解

const dbName = "MyCacheDB";
const version = 1;
let db;
const request = indexedDB.open(dbName, version);
request.onerror = (event) => {
console.error("无法打开 IndexedDB", event.target.error);
};
request.onsuccess = (event) => {
db = event.target.result;
console.log("数据库打开成功");
};
request.onupgradeneeded = (event) => {
db = event.target.result;
// 创建一个对象存储（类似表）
if (!db.objectStoreNames.contains("cache")) {
const objectStore = db.createObjectStore("cache", { keyPath: "id" });
objectStore.createIndex("timestamp", "timestamp", { unique: false });
console.log("对象存储创建完成");
}
};

function putData(id, value) {
  const transaction = db.transaction(["cache"], "readwrite");
  const store = transaction.objectStore("cache");
const data = {
id: id,
value: value,
timestamp: Date.now()
};
const request = store.put(data);
request.onsuccess = () => {
console.log("数据保存成功");
};
request.onerror = () => {
console.error("保存失败", request.error);
};
}

function getData(id) {
  const transaction = db.transaction(["cache"], "readonly");
  const store = transaction.objectStore("cache");
const request = store.get(id);
request.onsuccess = () => {
if (request.result) {
console.log("获取数据:", request.result.value);
} else {
console.log("未找到该 ID 的数据");
}
};
}

function deleteData(id) {
  const transaction = db.transaction(["cache"], "readwrite");
  const store = transaction.objectStore("cache");
const request = store.delete(id);
request.onsuccess = () => {
console.log("数据已删除");
};
}

function getAllData() {
  const transaction = db.transaction(["cache"], "readonly");
  const store = transaction.objectStore("cache");
const request = store.getAll();
request.onsuccess = () => {
console.log("所有缓存数据:", request.result);
};
}

async function getCachedOrFetch(url) {
  // 先查缓存
  const transaction = db.transaction(["cache"], "readonly");
  const store = transaction.objectStore("cache");
  const req = store.get(url);
return new Promise((resolve, reject) => {
req.onsuccess = async () => {
const cached = req.result;
const cacheAge = cached ? Date.now() - cached.timestamp : Infinity;
  // 缓存有效时间设为 5 分钟
  if (cached && cacheAge < 5 * 60 * 1000) {
    resolve(cached.value);
  } else {
    // 缓存过期或不存在，重新请求
    try {
      const res = await fetch(url);
      const data = await res.json();

      // 更新缓存
      putData(url, data);

      resolve(data);
    } catch (err) {
      reject(err);
    }
  }
};
});
}

getCachedOrFetch("/api/user")
  .then(data => console.log(data))
  .catch(err => console.error(err));