JS如何实现本地缓存_JavaScriptIndexedDB本地数据库使用方法详解

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

function putData(id, value) {
  const transaction = db.transaction(["cache"], "readwrite");
  const store = transaction.objectStore("cache");
<p>const data = {
id: id,
value: value,
timestamp: Date.now()
};</p><p>const request = store.put(data);</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1101">
                            <img src="https://img.php.cn/upload/ai_manual/001/503/042/68b6c6af75d71275.png" alt="腾讯智影-AI数字人">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1101">腾讯智影-AI数字人</a>
                            <p>基于AI数字人能力，实现7*24小时AI数字人直播带货，低成本实现直播业务快速增增，全天智能在线直播</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="腾讯智影-AI数字人">
                                <span>73</span>
                            </div>
                        </div>
                        <a href="/ai/1101" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="腾讯智影-AI数字人">
                        </a>
                    </div>
                <p>request.onsuccess = () => {
console.log("数据保存成功");
};</p><p>request.onerror = () => {
console.error("保存失败", request.error);
};
}</p>

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

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

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

async function getCachedOrFetch(url) {
  // 先查缓存
  const transaction = db.transaction(["cache"], "readonly");
  const store = transaction.objectStore("cache");
  const req = store.get(url);
<p>return new Promise((resolve, reject) => {
req.onsuccess = async () => {
const cached = req.result;
const cacheAge = cached ? Date.now() - cached.timestamp : Infinity;</p><pre class='brush:php;toolbar:false;'>  // 缓存有效时间设为 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));