使用本地存储将图像保存在javascript中

Question

检查我的JS小提琴： 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]); } }