Главная Мануалы Типы хранилищ в браузере Кеш-память (Cache storage)

Кеш-память (Cache storage)

CacheStorage (кеш-память) - это браузерный механизм для хранения и получения сетевых запросов и ответов. Он хранит пары объектов: запрос и ответ, запрос в качестве ключа и ответ в качестве значения.

CacheStorage API можно использовать в контексте Windows (контекст DOM), а также с Service Worker API для обеспечения автономного доступа. В этом руководстве мы больше поговорим о контексте DOM.

CacheStorage был создан для того, чтобы веб-сайты могли хранить сетевые запросы и ответы, но его также можно использовать в качестве утилиты для хранилища. Например, мы можем хранить в кеше пользовательские данные, такие как настройки пользователя, и при необходимости их можно извлекать. Метод put можно использовать для хранения настраиваемых объектов ответа в кеш-памяти.

CacheStorage API позволяет нам извлекать и кэшировать данные с других веб-сайтов. CacheStorage API является асинхронным и не блокирует отрисовку пользовательского интерфейса. Параметр CacheStorage - это последнее дополнение к хранилищам браузера, и некоторые браузеры до сих пор его не поддерживают.

Откроем кеш-память или создадим, если ничего нет:

caches.open('data_cache').then((cache) => {
							
  // получим data.json с исходного сервера и добавим ответ в хранилище кеша
  // поскольку разрешено кеширование ответов с разных источников - укажите полный URL-адрес запроса
  // запросим объект как ключ
  cache.add(new Request('/data.json'));

  var data={foo: "bar"};					
							
  // добавим дополнительную опцию заголовка к объекту ответа перед кешированием
  const jsonResponse = new Response(JSON.stringify(data), {
    headers: {
      'content-type': 'application/json'
    }
  });

  // добавим кастомные JSON-данные в кеш хранилища
  cache.put('/custom.json', jsonResponse);				

}).catch((err) => {
  console.log(err);
});

Увидеть кеш-хранилище можно в браузере в инструментах разработчика (F12 в Chrome) во вкладке "Application":

cacheStorage в Chrome

Добавив несколько URL-адресов в кеш, браузер получит ответы из источника:

caches.open('data_cache').then((cache) => {				
  const urls = ['/data1.json', '/data2.json', '/data3.json'];
  cache.addAll(urls);	
}).catch((err) => {
  console.log(err);
});

Проверим статус кеш-памяти:

caches.has('data_cache').then((bool) => {
  console.log('Кеш data_cache доступен: ', bool)
}).catch((err) => {
  console.log(err);
}) 

caches.has('test_cache').then((bool) => {
  console.log('Кеш test_cache доступен: ', bool)
}).catch((err) => {
  console.log(err);
})

Удалить кеш-память:

caches.delete('data_cache').then((bool) => {
  console.log('Кеш-память очищена');
}).catch((err) => {
  console.log(err);
})

Удалить определенный объект из хранилища кеша с помощью ключа кеша (URL-адреса запроса или объекта):

caches.open('data_cache').then((cache) => {
  cache.delete('custom.json');							
}).catch((err) => {
  console.log(err);
});

Получим все ключи кеша из кеш-памяти:

caches.open('data_cache').then((cache) => {
  cache.keys().then(function(keys) {				
    keys.forEach(function(key) {
      console.log(key.url);
    });
  });
}).catch((err) => {
  console.log(err);
});

Получим все данные кеша из кеш-памяти:

caches.open('data_cache').then((cache) => {
  cache.match('custom.json').then((response)=> {
    response.json().then(data => {
      console.log(JSON.stringify(data));
    });
  });
}).catch((err) => {
  console.log(err);
});

Предыдущая Следующая