如何在不覆盖原有数据的前提下向localStorage新增存储玩家姓名与分数

你现在遇到的覆盖问题有两个核心原因：

• 每次存储的都是单个玩家的对象，直接覆盖了localStorage的playerData字段
• 提前读取的savedPlayerData历史数组没有参与到存储逻辑里，完全没有被使用

你设想的存储格式不符合JS语法，更合理的存储结构是数组嵌套单个玩家对象，每个玩家的姓名和分数都作为独立对象存放在数组中，后续排序、渲染高分榜都更方便，参考结构如下：

[
  {playerName: "player1", score: 90},
  {playerName: "player2", score: 100}
]

调整后的代码实现 #

1. 历史数据读取（全局部分）

// 读取本地已存储的玩家列表，默认是空数组
let savedPlayerData = JSON.parse(localStorage.getItem("playerData") || "[]");

2. 移除冗余变量

原来的全局单个玩家对象const playerData = {playerName: "", score: ""}可以直接删掉，不需要全局维护单个玩家的数据。

3. 调整保存逻辑

function setPlayerNameAndScore() {
  const username = playerName.value
  playerNameLabel.classList.add("hide");
  playerName.classList.add("hide");
  saveScoreButton.classList.add("hide");

  // 生成当前新玩家的独立对象
  const currentPlayer = {
    playerName: username,
    score: finalScore
  }
  // 把新玩家追加到历史数组中
  savedPlayerData.push(currentPlayer);
  // 把更新后的完整数组存回本地
  localStorage.setItem("playerData", JSON.stringify(savedPlayerData));
}

可选补充 #

如果需要生成降序排列的高分榜，直接对数组按分数排序即可：

// 从高到低排序的高分榜数组
const sortedHighScore = savedPlayerData.sort((a, b) => b.score - a.score);

内容的提问来源于stack exchange，提问作者Tyler Norman