Question

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

我已经创建了scoreBox。我还将本地存储的得分设置为5，每当用户获胜时，得分盒中就会显示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的新手，我不知道如果我做对了事，我已经进行了研究，但找不到最能解决我问题的可能答案。是否可以在localStorage中存储HTML元素？

该游戏是一个简单的猜数字游戏，请在此处进行演示：
https://bolajiayodeji.github.io/brain-gym/

此处是完整的源代码：https://github.com/BolajiAyodeji/brain-gym
PS：ScoreBox功能是我正在研究的功能，尚未将其添加到演示中。

提前谢谢！

Answer 1

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

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

以相同的方式，您对该对象进行的每次更新都可以触发对其显示元素的更新。这甚至可以帮助您遵循所应用的更改，并确保localStorage中存储的内容与用户对其进度所看到的内容之间没有差异。

Answer 2

您需要将数据存储在localstorge中的数组中然后使用分别获取数据并添加值

Answer 3

我认为应该是将您的初始成绩存储在全局状态下（例如数组）存储在您的情况5中。用户分数每次增加5时，会将其添加到已在全局状态下设置的初始分数。然后，您要做的就是将阵列存储在本地存储中，然后在需要时提取它。

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

    }

´´´

然后您可以设置并获取“本地存储得分”。

希望这会有所帮助。

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

3 个答案: