Javascript/HTML5 - Store and display score in local storage

Question

I created a game with a score. Every time that there's a collision, it ads 10 points and when the user has made 16 collisions, the game ends, and the score gets stored in localstorage so it can be displayed on a scoreboard.

  //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;

          }

Then, there's a page for the scoreboard with the following code:

    //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; 
}

What I wanted to know is this: With the code like this, whenever there's a new score, it replaces the previous score in the scoreboard and it only shows the new score. Is there a way to store/display multiple scores without replacing the old ones? Thank you!

Answer 1

The localStorage can only store strings. You can store arrays in it using numerous formats. I would recommend JSON to do this. Have some array with the scores, and when reading from localStorage, JSON.parse it, and when writing, JSON.stringify. You probably want to change the span to an ordered list.

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;

}

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);
    }
}

Answer 2

You can push the scores to an array and save its stringified version to localStorage instead of storing a single value.

To display them in HTML, you should parse the stringified value coming back from localStorage to obtain an array again and map its values to an HTML element of your choice.

Something like this:

const board = document.getElementById('board');

// Load saved scores:

const fakeLocalStorage = {};

let scores = [];

try {
  scores = JSON.parse(fakeLocalStorage.scores);
} catch(err) {}

// Add new scores and save them:

document.getElementById('push').onclick = function() {  
  scores.push(Math.floor(Math.random() * 17));
  
  fakeLocalStorage.scores = JSON.stringify(scores);
  
  board.innerHTML = scores.map(score => `<li>${ score }</li>`).join('');
};

// Clear all scores and delete them from localStorage:

document.getElementById('clear').onclick = function() {
  scores = [];
  
  delete fakeLocalStorage.scores;
  
  board.innerHTML = '';
};

<button id="push">ADD SCORE</button>
<button id="clear">CLEAR SCORES</button>

<ul id="board"></ul>

Note localStorage is not allowed in StackOverflow snippets, so I just use a normal object fakeLocalStorage in this example. You can just swap it for localStorage in your code and it should still be working as expected.