从localStorage加载var n并循环n次

Question

我正在尝试学习JS，这是我的小应用程序。

[每次我按下“ INSTANTIATE”按钮时，它都会在我的<div>中实例化tomatoe.png。

当用户重新加载页面时，tomatoe.png的显示次数应与他们按下“ INSTANTIATE”按钮的次数相同。

这是代码。为此，我创建了一个变量（i），每次按下按钮时该变量就会增加。

我计划将此变量保存到localStorage中，并且当页面被重新加载时，我想调用一个循环函数，实例化tomatoe.png i次。

function popUp() {
  var img = document.createElement("img");
  img.src = "tomato.png";
  var src = document.getElementById("header");
  src.appendChild(img);
  i++;
  localStorage.setItem("apples", i);
}

<button onclick="popUp()">INSTANTIATE</button>
<div id="header"></div>

因此，当用户重新加载页面时，按下按钮的次数应与出现的西红柿次数相同。

我认为我必须使用循环，但是我不知道如何。

对不起，我的英语不好。

Answer 1

只需将项目放入localStorage中并循环直到其到达0，每次都创建一个新图像（由于安全原因，localStorage在此处的StackOverflow摘录中不起作用，但是您明白了）。 >

var i = 0;
function popUp() {
    newImage();
    i++;
    localStorage.setItem("apples", i);
}
function newImage() {
    var img = document.createElement("img");
    img.src = "tomato.png";
    var src = document.getElementById("header");
    src.appendChild(img);
}
var oldi = Number(localStorage.getItem("apples"));
while (oldi > 0) {
    oldi--;
    newImage();
}
<button onclick="popUp()">INSTANTIATE</button>
<div id="header"></div>