json JavaScript保存blob到localStorage

myss37ts 于 2023-10-21 发布在 Java

关注(0)|答案(2)|浏览(96)

我试图保存blob数据（favicon）通过AJAX检索，到localStorage .

验证码：

var xhr = new XMLHttpRequest();
xhr.open('GET', 
'http://g.etfv.co/http://www.google.com',
true);
xhr.responseType = "blob";
xhr.onload = function(e){ //Stringify blob...
    localStorage['icon'] = JSON.stringify(xhr.response);
    //reload the icon from storage
    var fr = new FileReader();
    fr.onload = 
        function(e) {
            document.getElementById("myicon").src = fr.result;
        }
    fr.readAsDataURL(JSON.parse(localStorage['icon']));
    }
xhr.send(null);

该代码改编自here，并进行了微小的修改，使其能够与localStorage一起使用。localStorage将所有数据保存为字符串，因此blob在保存之前需要以某种方式进行字符串化。
JSON不将blob作为其支持的类型之一处理，因此这段代码失败也就不足为奇了。
有没有办法把blob放到localStorage中？

JSON

来源：https://stackoverflow.com/questions/21008732/javascript-save-blob-to-localstorage

2条答案

按热度按时间

of1yzvn41#

只需将blob作为数据uri存储在本地存储中

var xhr = new XMLHttpRequest();
xhr.open('GET', 
'http://g.etfv.co/http://www.google.com',
true);
xhr.responseType = "blob";
xhr.onload = function(e){ //Stringify blob...
    //reload the icon from storage
    var fr = new FileReader();
    fr.onload = 
        function(e) {
            localStorage['icon'] = e.target.result;
            document.getElementById("myicon").src = localStorage['icon'];
        }
    fr.readAsDataURL(xhr.response);
}
xhr.send(null);

赞(0）回复(0）举报 2023-10-21

g0czyy6m2#

我们现在可以使用现代的fetch API来完成这项工作。

const getFromCacheOrDownload = async (url) => {
    const base64CachedImg = localStorage.getItem(url)
    if (base64CachedImg) {
        const response = await fetch(base64CachedImg)
        const blob = await response.blob()
        return URL.createObjectURL(blob)
    } else {
        const response = await fetch(url)
        if (response.status === 429) {
            console.log('too many requests')
        }
        const blob = await response.blob()
        const imageUrl = URL.createObjectURL(blob)
        const base64String = (await convertBlobToBase64(blob))
        localStorage.setItem(url, base64String)
        return imageUrl
    }
}

上面的代码将尝试从该高速缓存中获取图片。如果没有，它将下载并存储在该高速缓存中。

赞(0）回复(0）举报 2023-10-21

我来回答

json JavaScript保存blob到localStorage

2条答案

相关问题

热门标签

最新问答