Javascript 从localStorage加载变量n并循环n次

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

每次我按下“实例化”按钮，它都会在我的

中实例化一个tomatoe.png

当用户重新加载页面时，tomatoe.png的出现次数应与他们按下“实例化”按钮的次数相同

这是代码。为此，我创建了一个变量（

I

），并在每次按下按钮时递增

我计划将此变量保存到

localStorage

，当页面重新加载时，我想调用一个循环函数，该函数实例化tomatoe.png

I

次

函数弹出（）{
var img=document.createElement（“img”）；
img.src=“tomato.png”；
var src=document.getElementById（“头”）；
src.appendChild（img）；
i++；
localStorage.setItem（“苹果”，i）；
}

实例化

只需在

localStorage

中获取该项，并循环直到它达到

0

，每次都创建一个新映像（

localStorage

由于安全原因，在StackOverflow代码段中不起作用，但您明白这一点）

var i=0；
函数popUp（）{
newImage（）；
i++；
localStorage.setItem（“苹果”，i）；
}
函数newImage（）{
var img=document.createElement（“img”）；
img.src=“tomato.png”；
var src=document.getElementById（“头”）；
src.appendChild（img）；
}
var oldi=Number（localStorage.getItem（“苹果”）；
while（oldi>0）{
奥尔迪--；
newImage（）；
}

实例化

首先，如果本地存储器中不存在

i

，则必须在函数外部声明

i

，并将其值设为零：

let i=localStorage.getItem（“苹果”）|| 0；

然后，创建一个循环，循环

i

次：

for（设n=0；n

最后，创建西红柿：

const img=document.createElement（“img”）；
img.src=“tomato.png”；
const src=document.getElementById（“头”）；
src.appendChild（img）；

因此，完整代码应该如下所示：

document.addEventListener（'DOMContentLoaded'，function（）{
函数popUp（）{
create西红柿（）
i++；
localStorage.setItem（“苹果”，i）；
}
函数create番茄（）{
const img=document.createElement（“img”）；
img.src=“tomato.png”；
const src=document.getElementById（“头”）；
src.appendChild（img）；
}
document.getElementById（“实例化”）.addEventListener（“单击”，弹出窗口）
设i=localStorage.getItem（“苹果”）|| 0；
对于（设n=0；n

实例化

---

试穿一下

谢谢你的回答，这个循环什么时候会被调用？我必须调用它吗？@HakkiUzel因为循环不在函数中，所以它在加载页面时运行。但是，由于循环与DOM交互，因此应该将其包装为一个函数，用于侦听

load

（或者更好的是，

domcontentload

）事件。我将编辑我的答案，以显示如何。@HakkiUzel现在它应该。。。看我的编辑！只是想澄清一下，可运行的示例仍然不起作用，因为StackSnippets使用了跨源沙盒iFrame，阻止了对本地存储的访问感谢您试图帮助我，但它不起作用：（Uncaught TypeError:无法读取HTMLDocument处null的属性“addEventListener”。（app.js:15）7index.html:14未捕获引用错误：在HTMLButtonElement.onclick（index.html:14）中未定义弹出窗口