如何使用 Javascript 将新创建的元素存储到 localStorage 或 Cookie？

Question

我正在制作一个闲置的答题器游戏，一切都很顺利，直到我遇到问题。

我基本上想要发生的是当单击图像并且 clickCounter 元素超过一个时，会创建新的图像元素。 这里没问题，主要问题是保存图像。 如果用户刷新页面，我希望创建的元素仍然存在。 我曾尝试使用outerHTML并关注其他一些 Stack Overflow 论坛问题，但我永远无法为这个特定问题找到合适的解决方案。 我也尝试过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/Wwdw59oenFqB 请帮忙！ 谢谢你。 （：

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变量缩短代码