Storing base64 image data for multiple images in browser

Question

Which is the best way to store base64 image data for multiple images in browser for later use in Javascript? Please provide code sample also.

Thanks...

Answer 1

1)More efficient is using of blob URLs, it takes fewer browser resources ( link to post and link to documentation ). and then you can create map object for you URLs. Base64 takes by 37% more memory then Blob url

window.imagesMap = {};
window.imagesMap["your_image_name_1.jpg"] = URL.createObjectURL(blob1);
window.imagesMap["your_image_name_2.jpg"] = URL.createObjectURL(blob2);

//then you can use it
....
img.src =   window.imagesMap["your_image_name_1.jpg"];
....

2) If you need save images between pages, you have two ways : store blob or store base64. Firstly research please storage limits on this site -> link

Then you can store blob ( it depends on of browser capability see for example this post - > link ) or base64.