在 localStorage 中保存图像时出现 QuotaExceededError

Question

我正在尝试找出一种在浏览器内存中缓存图像的方法。我尝试将他们的 base64 表示保存在本地存储中，如下所示：

fr.readAsDataURL(blob)
fr.onloadend = () => {
   const base64 = fr.result
   localStorage.setItem(today.toDateString(), base64)
}

但是，我得到 the following error:

QuotaExceededError: Failed to execute 'setItem' on 'Storage': Setting the value of 'Wed Sep 29 2021' exceeded the quota.

我怎样才能做到这一点？

Answer 1

您可以在 localStorage 中使用的最大容量是 5mb，老实说，如果您的图片是这个大小，用户体验会很糟糕。

您应该让浏览器在需要的地方自动缓存，尤其是对于他们已经非常擅长的媒体内容。

Base64 我可以看出这是一个问题，有什么原因你不能提供 URL 而不是？

QuotaExceededError when saving images in localStorage