从浏览器缓存中检索值

Question

我创建了一个 service worker 来执行提取，然后立即将数据存储在缓存中。

self.addEventListener('install', async function(e) {
    try {
        const fileCache = await caches.open(CACHE_NAME);
        await fileCache.addAll(FILES_TO_CACHE);
        const dataCache = await caches.open(DATA_CACHE_NAME);
        const dataFetchResponse = await fetch('/api/transaction');
        return await dataCache.put('/api/transaction', dataFetchResponse);
    } catch (error) {
        console.log(error);
    }
});

在执行此操作后，我试图做到这一点，以便我可以测试自上次获取数据以来已经过了多长时间，以确定是否需要更新数据。我的 Transaction 模型在数据上添加了一个时间戳，所以理想情况下我想根据当前时间测试上次交易的时间戳，但我不确定该怎么做。

我已经尝试 cache.match() 但它没有 return 匹配键的整个对象。我知道 localStorage 有一个 .getItem() 方法，但我没有看到 cache 的任何类似方法。

对此有什么想法吗？

Answer 1

弄清楚如何获取信息。您必须 .match() 将 key 数据存储在缓存中，因为它 returns 承诺您将其转换为 .json() 对象。

async function getCachedData(cacheName, url) {
    const cacheStorage = await caches.open(cacheName);
    const cachedResponse = await cacheStorage.match(url); // Returns a promise w/ matched cache
    if(!cachedResponse || !cachedResponse.ok) {return false}
    console.log(await cachedResponse);
    console.log(await cachedResponse.json()); // prints json object with value of key matched
    return await cachedResponse.json();
};

从浏览器缓存中检索值

Retrieving values from browser cache

javascript

caching

cache-control

browser-cache