Question

不幸的是，标题中没有任何有效的代码示例。
周围发现的所有东西要么有点像帆布一样过时，要么太长了。

fetch('https://www.stevensegallery.com/320/240')
  .then(pic => pic.blob())
  .then(pic => localStorage['pic'] = pic);

在不编写单独函数的情况下，是否有简洁的单行代码？

Answer 1

您可以实现一个function来为您执行此操作：

function storeImage(key, url) {
  fetch(url)
    .then(pic => pic.blob())
    .then(pic => {
      const fr = new FileReader();
      fr.readAsDataURL(pic);
    })
    .then(pic => localStorage[key] = pic);
}

然后这样称呼它：

storeImage('pic', 'https://www.stevensegallery.com/320/240');

Answer 2

最后使其不太沉重。还必须先JSON.parse，然后再投入实际的来源。

fetch('https://source.unsplash.com/300x170/?girl')
  .then(pic => pic.blob())
  .then(pic => {
    const fr = new FileReader();
    fr.onload = () => { 
      const dataURL = fr.result;
      document.getElementById('pic').src = dataURL;
      localStorage['pic'] = JSON.stringify(dataURL);
    }
  fr.readAsDataURL(pic);
});

<img id='pic' />

使用fetch（）和blob（）将图像保存到localStorage

2 个答案: