В современной веб-разработке часто встречаются сценарии, когда вам необходимо загрузить файлы с сервера и сохранить их локально для автономного доступа или повышения производительности. IndexedDB, мощный API веб-хранилища, предоставляет отличное решение для этой цели. В этой статье мы рассмотрим различные способы загрузки файлов с сервера и сохранения их в IndexedDB с помощью JavaScript. Итак, приступим!

Метод 1: использование Fetch API и объектов Blob
Fetch API — это современная замена XMLHttpRequest, обеспечивающая простой способ выполнения HTTP-запросов. Объединив его с объектами Blob, мы можем загружать файлы и хранить их в IndexedDB. Вот пример:

fetch('https://example.com/file.pdf')
  .then(response => response.blob())
  .then(blob => {
    // Save the file to IndexedDB
    // ...
  });

Метод 2: использование XMLHttpRequest
Если вы предпочитаете использовать XMLHttpRequest, вы можете добиться того же результата. Вот пример:

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/file.pdf', true);
xhr.responseType = 'blob';
xhr.onload = function () {
  if (xhr.status === 200) {
    const blob = xhr.response;
    // Save the file to IndexedDB
    // ...
  }
};
xhr.send();

Метод 3: использование FileReader API
FileReader API позволяет нам читать содержимое файла, включая большие двоичные объекты. Мы можем использовать этот API для загрузки файлов и хранения их в IndexedDB. Вот пример:

fetch('https://example.com/file.pdf')
  .then(response => response.blob())
  .then(blob => {
    const reader = new FileReader();
    reader.onloadend = function () {
      const fileData = reader.result;
      // Save the file to IndexedDB
      // ...
    };
    reader.readAsArrayBuffer(blob);
  });

Метод 4: использование Service Worker
Если вы создаете прогрессивное веб-приложение (PWA), вы можете использовать Service Worker для перехвата сетевых запросов и кэширования файлов непосредственно в IndexedDB. Такой подход обеспечивает беспрепятственный автономный доступ. Вот упрощенный пример:

self.addEventListener('fetch', event => {
  event.respondWith(
    fetch(event.request)
      .then(response => {
        const clonedResponse = response.clone();
        caches.open('my-cache').then(cache => cache.put(event.request, clonedResponse));
        return response;
      })
      .catch(() => caches.match(event.request))
  );
});

В этой статье мы рассмотрели несколько способов загрузки файлов с сервера и сохранения их в IndexedDB с помощью JavaScript. Предпочитаете ли вы использовать Fetch API, XMLHttpRequest, FileReader API или использовать сервис-воркеров, в вашем распоряжении есть различные варианты. Выберите метод, который лучше всего соответствует требованиям вашего проекта, и начните внедрять эффективную загрузку и хранение файлов в IndexedDB уже сегодня!