时间戳

首页 > 解决方案 > 从 localStorage 加载 var n 并循环 n 次

javascript - 从 localStorage 加载 var n 并循环 n 次

问题描述

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

每次我按下“INSTANTIATE”按钮时，它都会在我的<div>.

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

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

我计划将此变量保存到localStorage中，当页面重新加载时，我想调用一个循环函数来实例化tomoe.pngi时间。

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>

因此，当用户重新加载页面时，他们按下按钮的次数应该会出现尽可能多的西红柿。

我想我必须使用循环，但我不知道如何。

标签： javascripthtmlloops

解决方案

只需将项目放入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>

推荐阅读