How to upload multiple images to localStorage?

Question

JavaScript

There is a script that loads the image into localStorage, then gets it from there and inserts it into the dom. How to do the same but with multiple images? I did it, but I had to rewrite the whole code, can I do it somehow easier?

Here is the code:

<img id="bannerImg" crossOrigin="*" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Proton-K-Zarya.jpg/800px-Proton-K-Zarya.jpg" />
<img id="tableBanner" crossOrigin="*" src="" />

bannerImage = document.getElementById('bannerImg');
 imgData = getBase64Image(bannerImage);
 localStorage.setItem("imgData", imgData);

 function getBase64Image(img) {
     var canvas = document.createElement("canvas");
     canvas.width = img.width;
     canvas.height = img.height;

     var ctx = canvas.getContext("2d");
     ctx.drawImage(img, 0, 0);

     var dataURL = canvas.toDataURL("image/png");

     return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
 }
 var dataImage = localStorage.getItem('imgData');
 bannerImg = document.getElementById('tableBanner');
 bannerImg.src = "data:image/png;base64," + dataImage;

Fiddle code : jsfiddle.net/4ra8nhk4/3

Answer 1

jsfiddle.net/zolotnitskiy/4ra8nhk4/4

<img id="bannerImg" class="image" crossOrigin="*" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Proton-K-Zarya.jpg/800px-Proton-K-Zarya.jpg" />
<img id="tableBanner" class="image" crossOrigin="*" src="https://upload.wikimedia.org/wikipedia/commons/e/e8/Richard_of_Shrewsbury%2C_1._Duke_of_York.jpg?download" />

var images = document.querySelectorAll('.image');
if (images.length > 0) {
    // в Storage
    var dataArray = [];
    for (var i = 0, itemsLength = images.length; i < itemsLength; i++) {
        dataArray.push({
            img: getBase64Image(images[i]),
            id: images[i].id || ''
        });
    }
 	localStorage.setItem("imagesData", JSON.stringify(dataArray));
    
    //из Storage
    var storageArray = JSON.parse(localStorage.getItem('imagesData'));
    if (Array.isArray(storageArray)) {
        storageArray.map(function (dataImage) {
            var element = document.getElementById(dataImage.id);
            if (element) {
                element.src = "data:image/png;base64," + dataImage.img;
            }
        });
    }
}

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}