我对 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;
});
}
}
关键是,我不知道这是否是使用图像的正确方法:我将它们存储为 strings, localForage 应该使用parse
and stringify
。
这个例子工作正常(当我离线时,我刷新页面,本地存储中的图像是可见的),但我看到有人使用 Image 对象或 Blob(我从来没有听说过,即时搜索并没有告诉我太多关于那)。其他人做一个 XHR 请求来下载图像,然后他们保存它。
我可以考虑使用 XHR 请求来检查图像是否已下载。这是正确的吗?
其次:有人说用blob存储更好。为什么?
请帮助我,谢谢。
编辑(多个承诺)
当我检索图像时,我必须将它们中的每一个绑定到一个<img>
. 但我不知道该怎么做,承诺。因为在使用时Promise.all()
我不能使用for
循环(所以没有索引来将图像 src 与图像 id 绑定)。
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];
};
})