如何使用JavaScript存储新创建的元素或cookie？

Question

我正在制作一个闲置的点击器游戏，以娱乐，一切都很好，直到遇到问题。

我基本上想发生的事情是，当单击图像并且点击元素元素超过一个时，创建了新的图像元素。这里没问题，主要问题是保存图像。如果用户刷新页面，我希望创建的元素仍然存在。我尝试使用 OuterHtml ，并遵循其他一些堆栈溢出论坛问题，但我永远无法找到适当的解决方案。我还尝试了 localstorage 和 cookie ，但我相信我使用它们错误。

我的代码在下面，我的SoloLearn将在下面链接，其中包括我项目的完整代码。

 function oneHundThou() {

   var countvar = document.getElementById("clickCounter")
    if(document.getElementById("clickCounter").innerHTML > 1) {
      alert("Achievement! 1 pat!")
      
      var achievement1k = document.createElement("img");
     

      // create a cookie so when the user refreshes the page, the achievement is shown again 

      document.cookie = "achievement1k=true";
      achievement1k.src = "https://c.pxhere.com/images/f2/ec/a3fcfba7993c96fe881024fe21e7-1460589.jpg!d";
      
      achievement1k.style.height = "1000px"
      achievement1k.style.width = "1000px"
      achievement1k.style.backgroundColor = "red"
      
      document.body.appendChild(achievement1k);
      oneHundThou = function(){}; // emptying my function after it is run once instead of using a standard switch statement
    }
    else {
      return
    }

  }
  oneHundThou();
  

我知道还有另一个与此相似的帖子，但是，我的答案无法在该帖子上回答。

完整代码在这里： https://code.sololearn.com/wwwdw59oenfqb > 请帮忙！谢谢。 （：

Answer 1

不要存储图像，而是尝试存储innerhtml，然后在文档加载上创建图像：

function oneHundThou() {
  countvar.innerHTML = localStorage.getItem('clickCount') ? localStorage.getItem('clickCount') : 0; //before if
  //original code
  localStorage.setItem('clickCount', countvar.innerHTML); //instead of doc.cookie
}

window.addEventListener('DOMContentLoaded', (event) => {
    oneHundThou();
});

或者，如果您不在乎clickcounter可能会初始化到null，则可以删除？ ：，然后放置

countvar.innerHTML = localStorage.getItem('clickCount');

编辑：用countvar变量缩短代码