Javascript/HTML5-在本地存储中存储和显示分数

我创造了一个有分数的游戏。每次发生碰撞时，它会显示10分，当用户进行了16次碰撞时，游戏结束，分数存储在localstorage中，因此可以显示在记分板上

  //everytime there's a collision, contador++
  // when contador reaches 16, there's a pop up and the score is saved in local storage.

  if (contador == 16)  {

  localStorage.setItem("pontosSalvos", pontos);

  var pop = document.getElementById ( "alerta_ajuda");
  pop.style.display = 'inline';
  contador = 0;

          }

然后，有一个记分板页面，其中包含以下代码：

    //the score gets displayed on a span called mensagem

    function mostraPontos() {
    var pontos = localStorage.getItem ("pontosSalvos");
    var span = document.getElementById ("mensagem_pontos");

    span.innerHTML = pontos; 
}

我想知道的是： 有了这样的代码，每当有新分数时，它就会替换记分板中以前的分数，并且只显示新分数。 有没有一种方法可以在不替换旧分数的情况下存储/显示多个分数？

---

谢谢大家!

您可以将分数推送到数组中，并将其字符串化版本保存到

localStorage

，而不是存储单个值

要在

HTML

中显示它们，您应该解析从

localStorage

返回的字符串化值，以再次获得数组，并将其值映射到您选择的

HTML

元素

大概是这样的：

const board=document.getElementById（'board'）；
//加载保存的分数：
常量fakeLocalStorage={}；
让分数=[]；
试一试{
scores=JSON.parse（fakeLocalStorage.scores）；
}捕获（错误）{}
//添加新分数并保存：
document.getElementById（'push'）。onclick=function（）{
得分。推（数学地板（数学随机（）*17））；
fakeLocalStorage.scores=JSON.stringify（scores）；
board.innerHTML=scores.map（score=>`
${score}
`）.join（“”）；
};
//清除所有分数并将其从本地存储中删除：
document.getElementById（'clear'）。onclick=function（）{
分数=[]；
删除fakeLocalStorage.scores；
board.innerHTML=''；
};
添加分数
清分
本地存储器只能存储字符串。可以使用多种格式在其中存储数组。我建议使用JSON来实现这一点。有一些带有分数的数组，从localStorage读取时，使用JSON.parse，写入时使用JSON.stringify。您可能希望将范围更改为有序列表

if (contador == 16)  {
    var pontosArr = JSON.parse(localStorage.pontosSalvos || '[]');
    pontosArr.push(+pontos);
    // Sorts highest to lowest
    pontosArr.sort(function(a, b) { return b - a; });
    localStorage.pontosSalvos = JSON.stringify(pontosArr);

    var pop = document.getElementById ( "alerta_ajuda");
    pop.style.display = 'inline';
    contador = 0;

}

函数mostraPontos（）{
//如果尚未存储任何内容，则pontos为空数组。
var pontos=JSON.parse（localStorage.pontosSalvos | | |'[]）；
var ol=document.getElementById（“mensagem_pontos”）；
ol.innerHTML=''；
//将所有分数作为列表元素追加
对于（变量i=0；i
你不认为给出一个这样做的例子会使它更适合于回答而不是评论吗？那么我建议你在提交之前写下它。并不是谁得到了第一个帖子就赢得了被接受的答案。如果你的答案/解决方案中没有相关信息，那么你这样做会使自己面临被否决的风险。我不同意最初的答案没有相关信息来回答问题。简言之，答案就是“将分数放入数组并将其存储在localStorage中”。如果需要额外的帮助来了解如何将阵列持久化到localStorage，那么还有其他问题需要解决。此外，我认为添加工作代码，特别是简单的问题/答案，只会提供轻松的复制粘贴解决方案，并鼓励新手编写以下问题“这是我的密码。它不起作用。请帮忙“因为他们也希望得到他们的代码，而不是如何解决下层问题的方向。我不认为这个问题是重复的，至少是我所指的问题：因为OP的问题是关于一个特定的用例，而不是泛型的功能。因此，我提供的代码不是任何东西的复制/粘贴，而是该用例的特定解决方案。如果我决定添加它而不是保留最初的答案，是因为在检查了现有的问题/答案后，我认为由于与这些示例的不同，这可能更清楚。您知道，在保存多个分数后，如果您使用不同的设备，您将只看到通过该设备和浏览器创建的分数。。。客户还可以编辑分数，因为他们完全可以访问cookie。@guest271314太错误了。只要人们能看到变量的定义，大多数人都不在乎名字的选择，也不会因此投票决定是否结束。@NewToJS可能，尽管出于好的理由我怀疑“大多数人不在乎”的合理性，但我们必须同意投票决定是否结束。这不是我会做的事，因为我不认为这是一个足够好的理由。只要我能看到变量是在哪里定义的，那么变量名的设置就没有什么区别，因为我知道它持有什么样的值来理解源代码的其余部分。
function mostraPontos() {
    // pontos is an empty array if nothing has been stored yet.
    var pontos = JSON.parse(localStorage.pontosSalvos || '[]');
    var ol = document.getElementById("mensagem_pontos");
    ol.innerHTML = '';
    // Appends all the scores as list elements
    for (var i = 0; i < pontos.length; i++) {
        var li = document.createElement('li');
        li.textContent = pontos[i];
        ol.appendChild(li);
    }
}