[Валерий1996]

Есть скрипт который берет изображения перекодирует в base64, потом загоняет изображения в локальное хранилище. Потом достает с локального хранилища и выводит в dom. Как сделать , чтоб та часть скрипта которая отвечает за вывод в dom срабатывала, и в онлайн и офлайн режымме? То есть пользователь обновил браузер а картинки остались ?

Вот мой код :

<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,/, "");
}

Вот весь код в фидле: http://jsfiddle.net/zolotnitskiy/4ra8nhk4/4/