Блог

Главная - Вопросы по программированию - Извлечение значений из кэша браузера

Извлечение значений из кэша браузера

#javascript #caching #browser-cache #cache-control

#javascript #кэширование #браузер-кэш #контроль кэша

Вопрос:

Я создал 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() , но он не возвращает весь объект соответствующего ключа. Я знаю, что у localStorage есть .getItem() метод, но я не вижу никаких похожих методов для cache этого.

Есть идеи по этому поводу?

Комментарии:

1. Что cache.match() возвращает?

2. Он вернет совпадающее значение в кэше, но пока примеры, которые я видел, соответствуют только ключу, а не значению.

3. Но это возвращаемое значение не содержит метки времени, которую вы хотите знать?

4. Примеры, которые я видел, будут возвращать только значение ключа, известное как его имя, а не значения, содержащиеся в нем.

5. Не могли бы вы утешить. записать это? caches.match поиск во всех кэшах и cache.match() в определенном catch. Он должен возвращать кэшированное значение, вот как работают работники службы

Ответ №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();
};