无法使用 ==> localStorage.setItem("gameScore", JSON.stringify(countScore)); 将对象 {countScore} 获取到本地存储中

问题描述 投票:0回答:1

我想了解我做错了什么,不允许将 countScore 保存到本地存储中(代码如下)。我有一种感觉,它涉及我如何调用 playerMove 函数以及导致对象无法设置的单独“if”语句。我不想完全重写我的代码,但如果这是唯一的选择,那么我可以自己重做代码。只是想知道如何使用我当前的代码将此对象保存到本地存储中。

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

我尝试将此步骤放在每个可能的位置,但总是返回“未定义”。

尝试重构以使代码以更少的行数运行。尝试了多条不同的线来放置它。尝试将分数从 if 语句中取出到它自己的单独函数中。回顾了如何正确存储和检索本地存储中的项目。

发帖寻求帮助,因为我可能会遗漏一些对专业人士来说显而易见的东西。

javascript html local-storage
1个回答
0
投票

你应该这样做:

const gameScore = JSON.parse(localStorage.getItem("gameScore"));

使用保存后即可使用

localStorage.setItem("gameScore", JSON.stringify(gameScore))

如果该值尚未保存,则

JSON.parse(localStorage.getItem("gameScore"))
将返回
null

© www.soinside.com 2019 - 2024. All rights reserved.