从 localStorage 加载 var n 并循环 n 次

Question

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

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

当用户重新加载页面时，tomatoe.png 应该出现的次数与他们按下“INSTANTIATE”按钮的次数一样多。

这是代码。为此，我创建了一个变量 (i)，它会在每次按下按钮时递增。

我计划将此变量保存到localStorage，当页面重新加载时，我想调用一个循环函数来实例化tomoe.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 sn-ps 中不起作用，但你明白了)。

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>

Answer 2

首先，你必须在你的函数之外声明i（如果你还没有这样做的话）并给它一个零值，如果它不存在于本地存储中：

let i = localStorage.getItem("apples") || 0;

然后，创建一个循环，循环 i 次：

for(let n = 0; n < i; n++){}

最后，创建西红柿：

const img = document.createElement("img");
img.src = "tomato.png";
const src = document.getElementById("header");
src.appendChild(img);

所以，完整的代码应该是这样的：

document.addEventListener('DOMContentLoaded', function(){
  function popUp() {
    createTomato()
    i++;
    localStorage.setItem("apples", i);
  }

  function createTomato() {
    const img = document.createElement("img");
    img.src = "tomato.png";
    const src = document.getElementById("header");
    src.appendChild(img);
  }

  document.getElementById("instantiate").addEventListener("click", popUp)

  let i = localStorage.getItem("apples") || 0;

  for (let n = 0; n < i; n++) createTomato();
})

<button id="instantiate">INSTANTIATE</button>
<div id="header"></div>

试试codepen.io