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

【问题标题】：Is it possible to add a HTML element and all its values to localStorage?是否可以将 HTML 元素及其所有值添加到 localStorage？
【发布时间】：2019-02-19 18:32:57
【问题描述】：

我正在构建一个小型 JavaScript 游戏，我想实现一个得分框。
我想做的是；每次用户获胜，给localStorage加5分，并显示在评分框中。
如果用户再次获胜，则将 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 的新手，我不知道我是否做了正确的事情，我进行了研究，但找不到最能解决我的问题的可能答案。是否可以在 localStorage 中存储 HTML 元素？

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

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

提前谢谢你！

【问题讨论】：

把谷仓带到牛而不是牛到谷仓
页面刷新时有值为什么不设置分数？
我不明白吗？

标签： javascript dom local-storage

【解决方案1】：

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

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

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

【讨论】：

谢谢！如何在使用 localStorage 的同时将所有数据存储在全局对象的状态或上下文类型中？
好吧，假设你会有一个对象状态，像这样state = { score: 5 }; every time you update the state, you can use a function to update the localStorage as well, like updateStorage() { localStorage.setItem('score', state.score)}
你能解释一下什么是状态吗？我尝试执行此建议并得到Uncaught SyntaxError: Unexpected end of input 我想我错误地使用了状态

【解决方案2】：

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

【讨论】：

类似function storeScore(score) { let playerScore; let scoreStored = localStorage.getItem('score'); if(storedScore === null) { playerScore = []; } else { playerScore = JSON.parse(storedScore); } playerScore.push(score); localStorage.setItem('tasks', JSON.stringify(tasks)); }; ?
如果我将分数存储在一个数组中，我只想要数组中的一项，即 5。那么如何在每次获胜后将数组更新为 +5？

【解决方案3】：

我认为它应该看起来的方式是存储您的初始分数，在您的案例 5 中处于全局状态，例如存储在一个数组中。每次用户分数增加 5 时，将其添加到已在全局状态中设置的初始分数。然后您所要做的就是将数组存储在本地存储中，然后随时获取它。

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

    }

´´´

然后您可以设置并获取“score form localStorage”。

希望这会有所帮助。

【讨论】：

我现在的主要问题是即使在重新加载后也要让数字留在 scoreBox 中，现在我已经实现在获胜后显示 5，但重新加载后值消失但仍保留在 localStorage
我想要的是一个固定的显示，重新加载后它应该仍然显示5，然后当你再次获胜时，增加5。scoreBox应该保留localStorage的值。请问我该如何解决？