Javascript游戏保存变量[重复]答案

【问题标题】：Javascript game save variable [duplicate]Javascript游戏保存变量[重复]
【发布时间】：2021-02-08 19:46:13
【问题描述】：

我的目标是每次单击正确的框时保存我的分数，如果我单击错误的框，分数将重置为 0，并且会弹出一条警告消息说“你输了。”。我的问题是，即使页面被刷新，如何将值保存到 javascript 中的变量中？我已经标记了变量首先被声明、更改和保存的重要位置。

<!DOCTYPE html>
<html lang="en">
    <style>

        .normalTableSize {
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 3%;
        }

        .navigationbarFont {
            font-size: xx-large;
            font-weight: bold;
        }

        .squareBorders {
            border: 2px solid black;
            width: 33%;
            padding:40px;
        }
        .buttons {
            border: 2px solid black;
            width: 100%;
            padding: 40px;
        }


        .score {
            text-align: center;
            font-size: x-large;
        }

    </style>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>J-Game</title>
    </head>
    <body width=100%;>
        <table width=100%;>
            <tr>
                <td>
                    <table width=60% class="normalTableSize" style="background-color: green; margin-top: 1%; border: 3px solid black;">
                        <tr>
                            <td>
                                <div style="width:60%; margin-left: auto; margin-right: auto; padding: 10px 0px 10px 0px;">
                                    <a class="navigationbarFont" href="">Home</a> <a style="margin-left: 5%;" class="navigationbarFont" href="">Games</a>
                                </div>
                            </td>
                        </tr>
                    </table>
                    <table>
**
<!--!!!!!!!!!!!!!!!!!!!!!!!!! VALUE GETS DISPLAYED HERE!!!!!!-->
                        <p id="score" class="score">0</p>
**
                    </table>

                    <!-- Maybe I should implement Buttons instead of table squares-->
                    <table width=60%; class="normalTableSize" style="text-align: center;">
                        <tr>
                            <td>
                                <button onclick="buttonclick(this.id)" id="1" class="buttons">1</button> 
                            </td>
                            <td>
                                <button onclick="buttonclick(this.id)" id="2" class="buttons">2</button>
                            </td>
                            <td>
                                <button onclick="buttonclick(this.id)" id="3" class="buttons">3</button>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <button onclick="buttonclick(this.id)" id="4" class="buttons">4</button>
                            </td>
                            <td>
                                <button onclick="buttonclick(this.id)" id="5" class="buttons">5</button>
                            </td>
                            <td>
                                <button onclick="buttonclick(this.id)" id="6" class="buttons">6</button>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <button onclick="buttonclick(this.id)" id="7" class="buttons">7</button>
                            </td>
                            <td>
                                <button onclick="buttonclick(this.id)" id="8" class="buttons">8</button>
                            </td>
                            <td>
                                <button onclick="buttonclick(this.id)" id="9" class="buttons">9</button>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <!-- <button onclick="hi">Click me!</button> -->
        <button onclick="stopAlerting()">Stop alerting!</button>
        <script>

    // Declaring variables
**
    //!!!!!!!!!!!!! TRIED TO USE "sesssionStorage", but couldnt figure out a way to use it well.
        sessionStorage.setItem('scoreamount', 0);
        let score = 0;
    //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
**
        let gameover = false;
        let rawRandNumber = randomNumber();
        let randomID = notZeroDetector();


    // Main Codeblock for the game

        if(gameover === false) {
**
    //!!!!!!!!! VALUE GETS DISPLAYED ON THE PAGE AS "SCORE" !!!!!!!!!!!!!!!!!!!!!!!
            document.getElementById('score').innerHTML = sessionStorage.scoreamount;
**
            squareGetsRed(randomID);
        } else {    
            console.log("U lost")
        }

    // Click button reaction

        function buttonclick(buttonid){ 
            if(buttonid == randomID){
**
    //!!!!!!!!! BUG (Value isnt saving after page reload) !!!!!!!!!!!!!!!!!!!!!!!
                score++;
                sessionStorage.scoreamount = score;
    //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
**
                location.reload();
            } else {
                gameover = true;
                alert("Wrong Button");
                location.reload();
            }

        }

    // Random Number function    
        function randomNumber(){
            return Math.floor(Math.random() * 10);
        }

    // Return 1 if rawRandNumber = 0 
        function notZeroDetector() {
            if(rawRandNumber === 0){
                return 1;  
            } else {
                return rawRandNumber;
            };
        }

    // Makes Squares red
        function squareGetsRed(number) {
            document.getElementById(number).style["background-color"] = "red";
        }

        function stopAlerting(){
            clearInterval(hi);
        }

        </script>
    </body>
</html>

【问题讨论】：

stackoverflow.com/help/minimal-reproducible-example
@mplungjan sessionStorage.scoreamount = score; 在功能上等同于 sessionStorage.setItem('scoreamount', score);。
使用sessionStorage.setItem('scoreamount', 0);，您总是在页面加载时无条件地将scoreamount 覆盖为0。你永远不会检查一个值是否已经定义。
@k0pernikus 除了 sessionStorage 在 stacksn-p 中不起作用
您是否有充分的理由重新加载页面？

标签： html variables session-storage

【解决方案1】：

您需要let scoreamount = +sessionStorage.getItem('scoreamount');，它将您的脚本变量设置为存储的值或将其设置为 0

改变

  sessionStorage.setItem('scoreamount', 0);
  let score = 0;

到

let scoreamount = +sessionStorage.getItem('scoreamount');

然后改成

 document.getElementById('score').innerHTML = scoreamount;

改变

 score++;
 sessionStorage.scoreamount = score;

到

 scoreamount++;
 sessionStorage.scoreamount = scoreamount;

【讨论】：

【解决方案2】：

你可以在 JS 中使用 localStorage ：

localStorage.setItem('yourScore', '123'); // Set the value
var score = localStorage.getItem('yourScore'); // retrieve the value from localStore

见： https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

您可以测试商店中是否保存了以前的分数

if (localStorage.getItem('yourScore') === null) {
    // if the key yourScore is null, there's no score registered
}

【讨论】：