我对 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
。
这个示例工作正常(当我离线时,我刷新页面,本地存储中的图像可见),但我看到有人使用 Image 对象或 Blob(我从未听说过,并且即时搜索)没有告诉我太多这件事)。
其他人执行 XHR 请求来下载图像,然后保存它。
我可以考虑使用XHR请求来检查图像是否已下载。这是正确的吗?
第二:有人说用 blob 存储更好。为什么?
请帮助我,谢谢。
编辑(多个 promise )
当我检索图像时,我必须将每个图像绑定(bind)到 <img>
。但我不知道如何做到这一点,带着 promise 。因为当使用Promise.all()
时我无法使用for
循环(因此没有索引将图像 src 与图像 id 绑定(bind))。
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);
});
修复 Promise.all().then()
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];
};
})
最佳答案
Blob 更好,因为 IndexedDB 可以优化它们在磁盘上的存储。本质上,它将它们直接存储为文件句柄。 (如果不支持 Blob 或 IDB,LocalForage 将转换为 base64。)
要将图像下载为 Blob,最简单的方法是使用 fetch polyfill 或 fetch()
API 并使用 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 错误,即在 forEach()
循环中执行多个 Promise。您可能更愿意使用 Promise.all()
。请阅读 We have a problem with promises 了解更多详细信息。
要使用 Blob,您可以查看 blob-util ,其中有一个教程,或者您可以阅读 the PouchDB guide to attachments 。 (PouchDB 使用 Blob 的方式与 LocalForage 类似,因此建议也类似。)
关于javascript - LocalForage、图像和 Blob,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37964529/