javascript - 为什么刷新页面时 localStorage 条目会重置？

Question

我正在为我的类(class)制作一个猜谜游戏，我们应该实现一个存储在本地的记分系统。我以为我理解了这个概念，但它并没有按照我预期的方式工作。当我玩游戏时，这些值存储在 localStorage 中，但是当我刷新时，这些值会重置......任何见解都会很棒!下面是我的脚本的开头，下面是我的 HTML 文件。

编辑:我将分数初始化为 1 的原因是因为只要用户猜对了，就会增加 4 分(产生 +3)，而当用户猜错时，就会减去 1 分(产生 -2)。每次点击重启按钮，用户都会再失去 1 分。

编辑 2:为了更清晰，不妨粘贴我脚本的其余部分:P

编辑 3:JSfiddle 很棒! http://jsfiddle.net/2pdaoeu6/

'use strict';
//Define a container for the game, its variables and its methods.
var game = {
  answerPosition: 0,   // position of the current answer in the answersList - start at 0
  display: '',         // the current dash/guessed letters display - ex '-a-a--r--t'
  wrong: '',           // all the wrong letters guessed so far
  answer: '',          // the correct answer - one word from game.answersList
  wrongCount: 0,       // the number of wrong guesses so far
  over: false,         // is the game over?
  score: 1,            // 1 - 1 = 0
  answersList: [       // list of answers to cycle through
    'JavaScript',
    'document',
    'element',
    'ajax',
    'jQuery',
    'event',
    'json',
    'listener',
    'transition',
    'window'
  ]
};



game.restart = function () {

    localStorage.setItem('localScore', game.score - 1);
    var localScore =  Number(localStorage.getItem('localScore'));
    // var localScore = localStorage.localScore;

    // Initialize the game at the beginning or after restart
    // Initialize the game variables - the model
    game.answer = game.answersList[game.answerPosition].toLowerCase(); // get the word for this round
    // use the modulo operator to cycle through the answersList
    game.answerPosition = (game.answerPosition + 1) % game.answersList.length;
    game.display = game.dashes(game.answer.length);
    game.wrong = '';
    game.wrongCount = 0;
    game.over = false;
    game.score = localScore;

    // Initialize the web page (the view)
    $('progress').val('0');  // initialize the progress bar
    $('#display').text(game.display);
    $('#wrong').text('');
    $('#guessedletter').val('');
    $('#score').text(localScore); // initialize score


    // The focus method invoked on an input element allows the user to type in that input without having to click it.
    $('#guessedletter').focus();
};


game.play = function () {
    // Invoked when the user clicks on GUESS
    if (game.over) {// if the game is over
        $('#wrong').text('Press RESTART to play again.');  // user has to restart
    } else {
        //if the game is not over yet
        var guess = $('#guessedletter').val().toLowerCase();
        if (game.check(game.answer, guess)) {
            // if the guess is valid
            $('#display').text(game.display);
        } else if (guess) {
            // If it's a wrong non-empty guess 
            game.wrong = guess + ' ' + game.wrong;
            game.wrongCount++;
            $('#wrong') .text(game.wrong);
            $('progress').val(game.wrongCount);
        }
        // reinitialize the guess
        $('#guessedletter') .val('');
        $('#guessedletter').focus();
        // check for a win or loss
        game.outcome();
    }
};

game.dashes = function (number) {
    // this function takes a number as a parameter
    // and returns a string with that many dashes
    var result = '';
    for (var i = 1; i <= number; i++)  {
        result = result + '-';
    }
    return result;  
};

game.check = function (answer, letter) {
    // Checks all occurrences of the letter guessed against game.answer. 
    // Returns true if the guess is correct and false otherwise. 
    // Updates the game dash display variable game.display if applicable.
    var position;
    var result = false;
    if (letter) {   // check that guess is not the empty string
        // Find the first occurrence of guess in the answer
        position = game.answer.indexOf(letter);
        // if the guessed letter is found in the answer
        if (position > - 1) {
            result = true;
        }
        while (position >= 0) {
            // update the dash display and find all remaining occurrences
            game.display = game.display.substring(0, position) + letter + game.display.substring(position + 1);
            // get the next occurrence
            position = game.answer.indexOf(letter, position + 1);
        }
    }
    return result;
};

game.outcome = function () {
    // check if the game is won or lost
    if (game.answer === game.display) {
        $('#wrong') .text('Congratulations! You win! +3 points.');
        // game.score = (game.score + 4);
    game.score = Number(localStorage.getItem('localScore')) + 4;
        // localStorage['localScore'] = Number(localStorage.getItem('localScore')) + 4;
        game.over = true;  // game is over.  User has to restart to play again
        setTimeout(function(){game.restart()}, 3000);
    } else if (game.wrongCount >= 10) {
        $('#wrong') .text('No more guesses; the answer was: ' + game.answer
            + '! -2 points :(');
        // game.score = (game.score - 1);
        game.score = Number(localStorage.getItem('localScore')) - 1;
        // localStorage['localScore'] = Number(localStorage.getItem('localScore')) - 1;
        game.over = true;  // game is over.  User has to restart to play again
        setTimeout(function(){game.restart()}, 3000);
    }
};

// Main program starts here
$(document).ready(function () {
    game.restart();
    $('#guessbutton').click(game.play);
    $('#restart').click(game.restart);
});





<!DOCTYPE html>
<html>
    <head>
            <meta charset="utf-8">
            <title>Guessing Game</title>
        <link rel="stylesheet" type="text/css" href="guess.css" media="all">
    </head>
    <body>
        <h2>Guess a Letter</h2>    
        <p id="display" class="letters"></p>
        <input id="guessedletter" type="text" maxlength='1' class="letters" autofocus>
            <div>            
        <input id="guessbutton" type="button" value="GUESS">
        </div>
            <p>Wrong Letters</p>
        <p id="wrong" class="letters wrong"> </p>       
        <progress value="0" max="10"></progress>
            <div> 
        <input id="restart" type="button" value="RESTART">
            </div> 
         <p>Score: <span id="score"></span></p>
        <script defer src="../scripts/jquery-1.11.3.js"></script>
        <script defer src="../scripts/guess.js"></script>
    </body>
</html>

Answer 1

据我所知，您在加载应用程序时调用了 game.restart()。在你的 restart() 方法中，你这样做:

localStorage.setItem('localScore', game.score - 1);

当您的应用程序启动时，您每次都在重置 localStorage 键 localScore，而您最后的分数消失了。尝试检查值是否存在，如果存在，则跳过 setItem，如下所示:

game.restart = function () {
    // if the localScore is not set, initialize it with your default value
    // otherwise don't set the localScore -> it would overwrite the saved values
    if(localStorage.getItem('localScore') === null) {
         localStorage.setItem('localScore', game.score - 1);
    }
    // .... rest of your function
}