是否可以将HTML元素及其所有值添加到localStorage？

Question

我正在构建一个小型JavaScript游戏，我想实现一个分数框。 我想做的是;每次用户获胜时，将分数5添加到localStorage并将其显示在分数框中。 如果用户再次获胜，则在localStorage +5中增加分数并显示更新的分数。

我创建了scoreBox。我还将5分设置为本地存储，每次用户获胜时，scoreBox中都会显示5

//这是分数框

let scoreBox = document.createElement('button');
scoreBox.className = "button-primary"
scoreBox.disabled = "true"
scoreBox.style.fontSize = "20px";
game.appendChild(scoreBox);

//这是我设置分数的方式

if(typeof(Storage) !== "undefined") {
   localStorage.setItem('score', 5)
   let score = localStorage.getItem('score');
   scoreBox.innerText = score;
} else {
  console.error('Local Storage not supported!')
}

现在，每次用户获胜时都会显示分数，但如果我刷新，则scoreBox中的值5不会保留，但仍保留在localStorage中。 我现在的问题是如何存储整个scoreBox，或者更确切地说如何使scoreBox及其textContent保留在localStorage中。

我是本地存储的新手，我不知道如果我做了正确的事情，我已经研究过但找不到最能解决我问题的答案。是否可以在localStorage中存储HTML元素？

游戏是一个简单的数字猜谜游戏，演示在这里： https://bolajiayodeji.github.io/brain-gym/

这里有完整的源代码：https://github.com/BolajiAyodeji/brain-gym PS：scoreBox功能正是我正在研究的，我还没有将它添加到演示中。

先感谢您！

Answer 1

我不认为这是正确的方法（当然我可能是错的）。即使游戏很简单，如果您将所有数据存储在状态或全局对象的上下文类型中，它也会对您有很大帮助（对于更复杂的游戏）。

您可以设置视图（在您的情况下为html），以显示它从此全局对象中读取的值。考虑到您将数据存储在localStorage中，每次重新加载时，您都可以正确显示更新的数据。

以同样的方式，您对此对象执行的每个更新都可以触发对其显示的元素的更新。这甚至可以帮助您跟踪您应用的更改，并确保localStorage中存储的内容与用户将其视为进度的内容之间没有差异。

Answer 2

您需要将数据存储在localstorage中的数组中，然后使用for each获取数据并添加值

Answer 3

我认为它应该是这样的方式是存储你的初始分数，在你的情况5中存储在一个全局状态，比如数组。每次用户分数增加5时，将其添加到已在全局状态中设置的初始分数。然后，您只需将数组存储在本地存储中，然后随时获取它。

´´´
    Let initialScore´=5
     function incrementScore () {
    /// add the increment to the gloabl initial score variable

    }

´´´

然后，您可以设置并获得“来自localStorage的分数”。

希望这可以帮助。