无法将countScore对象存入localStorage的技术求助

我想了解为何无法将countScore对象存入localStorage（代码如下）。我怀疑问题出在playerMove函数的调用方式以及独立的if语句导致对象未被设置。我不希望完全重写代码，但若必要也可自行修改，只想知道如何在现有代码基础上实现该对象的localStorage存储。

HTML代码

<!DOCTYPE html>
<html>
    <head>
        <title>Rock, Paper, Scissors</title>
        <link rel="stylesheet" href="RPS-style.css">
    </head>
    <body>
        <h1>Rock Paper Scissors</h1>
        <button onclick="pickRock()">Rock</button>
        <button onclick="pickPaper()">Paper</button>
        <button onclick="pickScissors()">Scissors</button>
        <button onclick="resetScore()">Reset Score</button>
        <p> Click <a href="">here</a> to see final version </p>
    <script src="RPS.js"></script>
    </body>
</html>

JS代码

const countScore = {
    Wins: 0,
    Losses: 0,
    Ties: 0
};
localStorage.getItem(JSON.parse(JSON.stringify(countScore)));

// localStorage.getItem("gameScore");

computerMove = () => {
    const randomizer = Math.random();
    if (randomizer >= 0 && randomizer < 1/3) {
        compChoice = "Rock"
    }
    else if (randomizer >= 1/3 && randomizer < 2/3) {
        compChoice = "Paper"
    }
    else if (randomizer >= 2/3 && randomizer < 1) {
        compChoice = "Scissors"
    };
    return compChoice;
};

playerMove = (pChoice) => {
    let compChoice = computerMove();
    if (compChoice === pChoice) {
        countScore.Ties += 1;
        result = alert(`Computer chose ${compChoice} - It's a tie!\n${score()}`);
    } else if (compChoice === "Scissors" && pChoice === "Rock" || compChoice === "Rock" && pChoice === "Paper" || compChoice === "Paper" && pChoice === "Scissors") {
        countScore.Wins += 1;
        result = alert(`Computer chose ${compChoice} - ${pChoice} beats ${compChoice}, you win!\n${score()}`);
    } else if (compChoice === "Paper" && pChoice === "Rock" || compChoice === "Rock" && pChoice === "Scissors" || compChoice === "Scissors" && pChoice === "Paper") {
        countScore.Losses += 1;
        result = alert(`Computer chose ${compChoice} - ${compChoice} beats ${pChoice}, you lose!\n${score()}`);
    };
    console.log(localStorage.setItem("gameScore", JSON.stringify(countScore)));
    console.log(countScore);

    // console.log(countScore);
    // console.log(JSON.stringify(countScore));
    // console.log(JSON.parse(JSON.stringify(countScore)));
};

score = () => {
    return (`Wins: ${countScore.Wins}, Losses: ${countScore.Losses}, Ties: ${countScore.Ties}`);
};

resetScore = () => {
    countScore.Wins = 0;
    countScore.Losses = 0;
    countScore.Ties = 0;
    alert(score());
};

pickRock = () => {
    computerMove();
    playerMove("Rock");
};

pickPaper = () => {
    computerMove();
    playerMove("Paper");
};

pickScissors = () => {
    computerMove();
    playerMove("Scissors");
};
// localStorage.setItem("gameScore", JSON.stringify(countScore));
// console.log(countScore);
// console.log(localStorage.setItem("gameScore", JSON.stringify(countScore)));

我尝试将存储步骤放在所有可能的位置，但始终返回'undefined'。我尝试重构代码以减少行数，尝试将存储步骤放在不同行，尝试将分数逻辑从if语句中抽离为独立函数，也查阅了localStorage的正确存取方法。在此发帖求助，可能遗漏了一些专业人士看来显而易见的问题。

你的代码里有几个关键问题导致localStorage存储/读取异常，以下是针对现有代码的修改方案：

核心问题分析 #

1. 初始化读取逻辑完全错误：开头的localStorage.getItem(JSON.parse(JSON.stringify(countScore)));写法混乱，getItem只需要传入存储的键名（比如gameScore），而不是解析后的对象。
2. 误解setItem的返回值：localStorage.setItem本身没有返回值，所以你用console.log打印它必然输出undefined——这不是存储失败，是方法本身的特性。
3. 重置分数未同步到localStorage：resetScore函数只修改了内存里的countScore，没同步到本地存储，导致刷新后分数又回到之前的状态。
4. 冗余的函数调用：pickRock等函数里重复调用了computerMove()，但playerMove内部已经调用过，属于无效计算。

分步修改代码 #

1. 修正分数初始化逻辑
   把开头的countScore声明改成从localStorage读取，没有存储数据时才用默认值，同时把const改为let（因为需要重新赋值）：

   let countScore = JSON.parse(localStorage.getItem("gameScore")) || {
       Wins: 0,
       Losses: 0,
       Ties: 0
   };
   

2. 修正setItem的打印逻辑
   把console.log(localStorage.setItem("gameScore", JSON.stringify(countScore)));改成：

   localStorage.setItem("gameScore", JSON.stringify(countScore));
   console.log("当前分数已存入localStorage:", countScore);
   

3. 重置分数同步到localStorage
   修改resetScore函数，增加同步存储的代码：

   resetScore = () => {
       countScore.Wins = 0;
       countScore.Losses = 0;
       countScore.Ties = 0;
       localStorage.setItem("gameScore", JSON.stringify(countScore));
       alert(score());
   };
   

4. 移除冗余函数调用
   删掉pickRock、pickPaper、pickScissors里的computerMove();，修改后如下：

   pickRock = () => {
       playerMove("Rock");
   };
   
   pickPaper = () => {
       playerMove("Paper");
   };
   
   pickScissors = () => {
       playerMove("Scissors");
   };
   

修改后的完整JS代码 #

// 初始化分数：从localStorage读取，无则用默认值
let countScore = JSON.parse(localStorage.getItem("gameScore")) || {
    Wins: 0,
    Losses: 0,
    Ties: 0
};

computerMove = () => {
    const randomizer = Math.random();
    let compChoice;
    if (randomizer >= 0 && randomizer < 1/3) {
        compChoice = "Rock"
    }
    else if (randomizer >= 1/3 && randomizer < 2/3) {
        compChoice = "Paper"
    }
    else if (randomizer >= 2/3 && randomizer < 1) {
        compChoice = "Scissors"
    };
    return compChoice;
};

playerMove = (pChoice) => {
    let compChoice = computerMove();
    if (compChoice === pChoice) {
        countScore.Ties += 1;
        alert(`Computer chose ${compChoice} - It's a tie!\n${score()}`);
    } else if (compChoice === "Scissors" && pChoice === "Rock" || compChoice === "Rock" && pChoice === "Paper" || compChoice === "Paper" && pChoice === "Scissors") {
        countScore.Wins += 1;
        alert(`Computer chose ${compChoice} - ${pChoice} beats ${compChoice}, you win!\n${score()}`);
    } else if (compChoice === "Paper" && pChoice === "Rock" || compChoice === "Rock" && pChoice === "Scissors" || compChoice === "Scissors" && pChoice === "Paper") {
        countScore.Losses += 1;
        alert(`Computer chose ${compChoice} - ${compChoice} beats ${pChoice}, you lose!\n${score()}`);
    };
    // 存入localStorage
    localStorage.setItem("gameScore", JSON.stringify(countScore));
    console.log("当前分数:", countScore);
};

score = () => {
    return (`Wins: ${countScore.Wins}, Losses: ${countScore.Losses}, Ties: ${countScore.Ties}`);
};

resetScore = () => {
    countScore.Wins = 0;
    countScore.Losses = 0;
    countScore.Ties = 0;
    // 同步重置后的分数到localStorage
    localStorage.setItem("gameScore", JSON.stringify(countScore));
    alert(score());
};

pickRock = () => {
    playerMove("Rock");
};

pickPaper = () => {
    playerMove("Paper");
};

pickScissors = () => {
    playerMove("Scissors");
};

验证方法 #

• 玩几局游戏后，打开浏览器控制台（F12），进入Application -> LocalStorage，查看是否存在gameScore键，值是否为正确的JSON格式分数。
• 刷新页面，分数会保留；点击重置分数后，localStorage里的分数也会同步清零。

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