从浏览器缓存中检索值答案

【问题标题】：Retrieving values from browser cache从浏览器缓存中检索值
【发布时间】：2021-01-27 00:57:51
【问题描述】：

我创建了一个服务工作者，它执行提取然后立即将数据存储在缓存中。

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()，但它没有返回匹配键的整个对象。我知道 localStorage 有一个 .getItem() 方法，但我没有看到任何类似的 cache 方法。

对此有什么想法吗？

【问题讨论】：

cache.match() 返回什么？
它会在缓存中返回一个匹配的值，但到目前为止我看到的例子只匹配键而不是值。
但是那个返回值不包含你想知道的时间戳？
我看到的示例只会返回键的值，也就是它的名称，而不是其中包含的值。
你能console.log吗？ caches.match 在所有缓存中搜索，cache.match() 在特定捕获中搜索。它必须返回缓存的值，这就是服务工作者的工作方式

标签： javascript caching browser-cache cache-control

【解决方案1】：

想出了如何获取信息。您必须 .match() key 存储在缓存中的数据，因为它返回一个承诺，您将其转换为 .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();
};

【讨论】：