LocalForage, images and Blobs

Question

Я немного смущен об использовании LocalForage. Я просто хочу сохранить и получить изображение из LocalForage, вот как я это делаю.

function preload() { 

    localforage.setDriver(localforage.LOCALSTORAGE).then(function() { 

     lcl_images[0] = new Object(); 
     lcl_images[0].key = 'lclstorage_1'; 
     lcl_images[0].value = 'http://www.superga.com/tcnimg/S/02/S009TE0/XBS009TE0___949______.jpg'; 

     lcl_images[1] = new Object(); 
     lcl_images[1].key = 'lclstorage_2'; 
     lcl_images[1].value = 'https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/2150fb35419617.56f6327b44e47.gif'; 

     for (var i = lcl_images.length - 1; i >= 0; i--) { 

      var valore = lcl_images[i].value; 
      localforage.setItem(lcl_images[i].key, lcl_images[i].value, function() { 
       console.log('Saved: ' + valore); 
      }); 
     } 
    }); 
} 

function use_preloaded_image() { 

    for (var i = lcl_images.length - 1; i >= 0; i--) { 

     var key = lcl_images[i].key; 
     localforage.getItem(lcl_images[i].key, function(err, readValue) { 
      console.log('Read: ', readValue); 
      document.getElementById(key).src = readValue; 
     }); 
    } 
} 

Дело в том, я не знаю, если это правильный метод, чтобы использовать изображения: хранить их как строки, localForage должны использовать parse и stringify. Этот пример отлично работает (когда я перехожу в автономный режим, обновляю страницу, изображения в localstorage доступны), но я вижу, что кто-то использует объекты изображения или Blobs (об этом я не слышал, и мгновенный поиск не сказал мне многое об этом). другие делают запрос XHR для загрузки изображения, затем они сохраняют его.

Я могу подумать об использовании запроса XHR для проверки того, было ли загружено изображение. Это правильно?

Во-вторых: кто-то говорит, что хранение с каплями лучше. Зачем?

Пожалуйста, помогите мне, спасибо.

EDIT (Multiple Promises)

Когда я получить изображения, которые я должен связать каждый из них с <img>. Но я не знаю, как это сделать, с обещаниями. Потому что при использовании Promise.all() я не могу использовать цикл for (поэтому нет индекса для привязки изображений src с идентификатором изображений).

var promises = []; 

for (var i = lcl_images.length - 1; i >= 0; i--) { 
    promises.push(localforage.getItem(lcl_images[i].key)); 
} 

Promise 
    .all(promises) 
    .then(function(value) { 
     console.log(value); 
    }) 
    .catch(function(error) { 
     console.log(error); 
    }); 

for (var i = lcl_images.length - 1; i >= 0; i--) { 
    document.getElementById(lcl_images[i].key).src = value; 
} 



Promise 
    .all(promises) 
    .then(function(value) { 
     console.log(value); 
     document.getElementById(lcl_images[i].key).src = value; 
     // I can't get the index i, no way to set <img> src for id attribute 
    }) 
    .catch(function(error) { 
     console.log(error); 
    }); 

FIXPromise.all(). Затем()

Promise 
.all(promises) 
.then(function(value) { 
    console.log(value); 
    for (var i = lcl_images.length - 1; i >= 0; i--) { 
     document.getElementById(lcl_images[i].key).src = value[i]; 
    }; 
}) 

Answer 1

Blobs лучше, потому что IndexedDB может оптимизировать их хранение на диске. По сути, он хранит их непосредственно в виде файлов. (В случаях, когда Blobs не поддерживается или IDB не поддерживается, LocalForage будет конвертировать в base64.)

Чтобы загрузить изображение в виде Blob, проще всего использовать полис заполнения или API fetch() и использовать response.blob() (см. MDN docs). Другой способ - использовать XMLHttpRequest и сделать xhr.responseType = 'blob. Пример:

fetch('http://example.com/myimage.gif').then(function (response) { 
    return response.blob(); 
}).then(function (blob) { 
    console.log("yay I have a blob", blob); 
}).catch(console.log.bind(console)) 

Также другая вещь, которую вы должны знать, что это выглядит, как вы делаете классическую Promise ошибку в коде, который должен сделать несколько Promises в forEach() цикле. Вероятно, вы скорее сделаете Promise.all(). Пожалуйста, прочитайте We have a problem with promises для более подробной информации.

Для работы с Blobs вы можете проверить blob-util, в котором есть учебник, или вы можете прочитать the PouchDB guide to attachments. (PouchDB использует Blobs аналогично LocalForage, поэтому совет аналогичен.)