Использование локального хранилища для сохранения изображения в JavaScript

Question

Проверьте мою JS Fiddle: https://jsfiddle.net/oxfre6kj/1/

У меня есть кнопка, которая создает столько изображений, сколько вы хотите, но когда я обновляю страницу, эти изображения исчезают, я хочу, чтобы они оставались там после того, как янажмите кнопку сохранения.

Вот что я пробовал, он работает с переменной, но не работает с "img"

<button onclick="createImage()">Create Image</button>
<button onclick="saveImages()">Save Images</button>
<div id="image"></div>

<script>
function createImage() {
        var img = document.createElement('img');
        img.src = 'http://via.placeholder.com/350x150';       
        document.getElementById('image').appendChild(img);
}


var image = localStorage.getItem('image');
alert(image);

function saveImage() {
    localStorage.setItem("images", image);
}
</script>

Answer 1

это как вы хотите, чтобы страница работала?

HTML:

<button id="create_image">Create Image</button>
<button onclick="saveImages()">Save Images</button>

<label for="image_url">Image url :</label>
<input type="text" id="image_url" value="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded" placeholder="img url">

<div id="images"></div>

JAVASCRIPT:

document.getElementById("create_image").addEventListener("click", function() {
  const url = document.getElementById("image_url").value;
  createImage(url);
});

var images = localStorage.getItem('image');
loadImagesFromLocal();

function createImage(src) {
  var img = document.createElement('img');
  img.src = src;
  img.onload = function() {
    document.getElementById('images').appendChild(img);
  }
}

function saveImages(img) {
  const images = document.querySelectorAll(`div#images img`);
  var savedImagesSrc = JSON.parse(localStorage.getItem("images")) || [];
  savedImagesSrc = Array.from(savedImagesSrc);

  for (var i = savedImagesSrc.length; i < images.length; i++) {
    savedImagesSrc.push(images[i].src);
  }

  localStorage.setItem("images", JSON.stringify(savedImagesSrc));
}

function loadImagesFromLocal() {
  const savedImagesSrc = JSON.parse(localStorage.getItem("images")) || [];

  for (var i = 0; i < savedImagesSrc.length; i++) {
    createImage(savedImagesSrc[i]);
  }

}