How do you pass a new value into an object key-pair without overwriting the old key-value?

Question

I need to make an app that will store a user's name and score. The name and score are supposed to be stored locally and then finally displayed on a high scores screen. I am hitting a snag on how to update the object with a new name and score without overwriting the previous one. Here is the pertinent code:

// persistence
savedPlayerData = JSON.parse(localStorage.getItem("playerData") || "[]");

function storePlayerData() {
  localStorage.setItem("playerData", JSON.stringify(playerData));
}

// player name and score object
const playerData = {playerName: "", score: ""}

// function that writes to the playerData object...
// ...when a save button is clicked elsewhere in my script
function setPlayerNameAndScore() {
  username = playerName.value
  playerNameLabel.classList.add("hide");
  playerName.classList.add("hide");
  saveScoreButton.classList.add("hide");

  playerData["playerName"] = username;
  playerData["score"] = finalScore

  storePlayerData();
}

Every time a user chooses to save their name and score, the storePlayerData() function is overwriting data written when the first user clicks a save button. The save button stores a name and score in the const playerData = {playerName: "", score: ""} object, and that object is stored locally.

How can I get my locally saved data to look like this: const playerData = {playerName: "player1", "player2", score: "90", "100"} ? I'm not even sure that's the right format either, but I need to be able to store multiple player names and associate them with their player's score so I can later display them on a high scoreboard.

Answer 1

Personally, I would make the playerData into something like this: {player_1: 90, player_2: 80} .

That way, you at least have a key-value pair where the key is the player and value is the score.

You can stringify this and then store it in local storage. Whenever you have a new player, you simply do something like:

playerData['player_3'] = 50 and then that result in playerData becoming: {player_1: 90, player_2: 80, player_3: 50} .

You then would have solved one of your issues, to be able to add players without overriding.

Now, I'm guessing your previous structure was there to allow easy sorting. But you can still sort it into a leaderboard by doing the following:

// First, lets convert the data to list.
leaderbord = []
for (playerScore in playerData) {
    leaderbord.push([playerScore, playerData[playerScore])

// Next, we can sort this list by checking the second element of each list element.
for (playerScore in playerData) {
    leaderbord.push([playerScore, playerData[playerScore]])
    leaderbord.sort((a,b) => b[1]-1[1])
}

Answer 2

You could occupy the username as a key and the score as a value

const playerData = {};
let nombre = 'fernando';
playerData[nombre] = 45;
let nombre = 'luis';
playerData[nombre] = 5;