QuotaExceededError when saving images in localStorage-CodePudding

I'm trying to figure out a way to cache images in browser memory. I tried saving their base64 representation in local storage as follows:

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

However, I'm getting the following error:

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

How can I accomplish this?

CodePudding user response：

The most you can use in localStorage is 5mb, which honestly if your images are that size it's going to be a bad user experience.

You should let the browser cache automatically where it needs to, especially for media content they're really clever at that already.

Base64 I can see being a problem, is there a reason you can't provide a URL instead?