Загрузите var n из localStorage и l oop n раз

Question

Я пытаюсь выучить JS, и это мое маленькое приложение.

Каждый раз, когда я нажимаю кнопку "INSTANTIATE", он создает tomatoe.png в моем <div>.

Когда пользователь перезагружает страницу, tomatoe.png должен появляться столько раз, сколько он нажал кнопку «INSTANTIATE».

Это код. Для этого я создал переменную (i), которая увеличивается при каждом нажатии кнопки.

Я планировал сохранить эту переменную в localStorage, и когда страница будет перезагружена, я хочу вызвать al oop функция, которая создает экземпляр 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>

Итак, когда пользователь перезагружает страницу, столько помидоров должно появляться столько раз, сколько они нажали кнопку.

Я думаю Я должен использовать все oop, но я не знаю, как.

Answer 1

Просто получите элемент в localStorage и l oop, пока он не достигнет 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>

Answer 2

Прежде всего, вы должны объявить i вне вашей функции (в случае, если вы еще этого не сделали) и присвоить ему значение ноль, если его нет в локальном хранилище:

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

Затем создайте al oop, который зацикливается 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