Question

我正在制作一个简单的数学游戏，其中使用Math.random（）生成两个数字和随机符号（正负）。用户应在输入框中提供答案。我面临的问题是，当我尝试在本地存储中保存分数和高分数，然后在下一页重新加载时检索它。没有错误，只是变量未定义。由于其他奇怪的原因，highScore始终未定义。如何正确地将localStorage保存为score和highScore，并正确地在下一页进行检索而没有undefined的情况下重新加载？

<div class='window' id='gamesDIV'>
        <h1 id='scoreEnd'>Score</h1>
        <h1 id='highScore'>HightScore</h1>
        </center>
        <div class='button' onClick='prepareGame()' id='specialRed'>Start</div>
        <div id='gameWindow'>
            <div style='white-space: nowrap;'>
                <p id='expression'>5-3</p>
            </div>
            <div id='score'>0</div>
            <div id='time'>5</div>
            <input onchange='CheckResult()' onkeyup='CheckResult()' id='answer' placeholder='Answer' type='number'></input>
            <center>



        </div>
    </div>

var DP = 10;
    var topUp = 2;
    var result;
    var score = window.localStorage[score];
    var game = false;
    var Gsec = 5;
    var lastExp = null;
    var TimerFnc;
    var highScore = window.localStorage[highScore];
    var scoreEndValue = window.localStorage[score];
    $('div#percentage').hide();
    $('div#SR').hide();
    $('div#gamesDIV').hide();
    $('div#gameWindow').hide();
    document.getElementById('scoreEnd').innerHTML = window.localStorage[score];
    document.getElementById('highScore').innerHTML = window.localStorage[highScore];

    function prepareGame() {
        document.getElementById('answer').value = null;
        score = 0;
        $('div#specialRed').hide();
        $('div#menu').hide();
        $('div#gameWindow').show();

        $("div#gamesDIV").css("margin-left", "0");
        $("div#gamesDIV").css("width", "100vw");

        $("div#gamesDIV").css("background-color", "black");
        Start();
        TimerFnc = setInterval(Timer, 1000);
        game = true;
        Gsec = 5;
    }

    function Timer() {
        if (Gsec > 0) {
            Gsec--;
            console.log("Remaining seconds", Gsec);
            // document.getElementById('time').innerHTML="5";
            document.getElementById('time').innerHTML = Gsec;

        } else {
            game = false;
            EndGame();
        }
    }

    var num1, num2;

    function Start() {
        game = true;
        console.log('Starting generating numbers.');
        num1 = Math.round(Math.random() * topUp);
        num2 = Math.round(Math.random() * topUp);
        var sign = Math.round(Math.random() * 2);
        console.log(num1, num2, sign);
        if (sign == 1) {
            sign = '+';
            result = num1 + num2;
        } else {
            sign = '-';
            if (num1 <= num2) {
                num1 = Math.round(Math.random() * topUp);
                num2 = Math.round(Math.random() * (num1));
                result = num1 - num2;
            } else {
                result = num1 - num2;
            }
        }
        console.log(num1, num2, sign);
        if (lastExp == (num1 + sign + num2)) {
            Start();
        } else {
            document.getElementById('expression').innerHTML = num1 + sign + num2;
            lastExp = num1 + sign + num2;
        }
    }

    function EndGame() {
        clearInterval(TimerFnc);
        if (score > highScore) {
            highScore = score;
        }
        document.getElementById('highScore').innerHTML = "Highscore: " + highScore;
        document.getElementById('scoreEnd').innerHTML = "Score: " + score;

        $('div#specialRed').show();
        $('div#menu').show();
        $('div#gameWindow').hide();

        $("div#gamesDIV").css("margin-left", "5vw");
        $("div#gamesDIV").css("width", "95vw");

        $("div#gamesDIV").css("background-color", "white");
        console.log(score, highScore);

        window.localStorage['highScore'] = highScore;

        window.localStorage['score'] = score;

        console.log(score, highScore);


    }

    function CheckResult() {
        if (result == document.getElementById('answer').value) {
            Gsec = 5;
            //  document.getElementById('time').innerHTML="5";
            document.getElementById('time').innerHTML = Gsec;
            console.log('True');
            topUp = Math.round(topUp * 1.4);
            document.getElementById('answer').value = null;
            Start();
            score = score + 1;
            document.getElementById('score').innerHTML = score;
        } else {
            console.log('false');
        }
    }

This is before starting the game and all of the above functions

This is after game

This after the page reload

Answer 1

您必须像这样更改代码

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage#Example

localStorage.setItem('myCat', 'Tom');

var cat = localStorage.getItem('myCat');

JavaScript本地存储未保存或检索信息

1 个答案: