Sayfayı yenilediğimde neden localStorage girdileri sıfırlanıyor?

Question

Sınıfım için bir tahmin oyunu yapıyorum ve yerel olarak saklanan bir puan tutma sistemini uygulamamız gerekiyor. Kavramı anladığımı sanıyordum ama niyet ettiğim şekilde çalışmıyor. Oyunu oynadığımda değerler localStorage'da saklanır, ancak yenilediğimde değerler sıfırlanır ... Herhangi bir fikir harika olurdu! Aşağıda benim komut dosyasının başlangıcı ve altında bu benim HTML dosyam.

DÜZENLEME: Skoru 1 olarak başlatmamın nedeni, kullanıcı doğru bir şekilde tahmin ettiğinde 4 puan eklenir (+3 değeri verilir) ve kullanıcı yanlış tahmin ettiğinde, 1 puan düşülür (sonuçta -2). Yeniden başlat düğmesine her tıklandığında, kullanıcı 1 puan daha kaybeder.

DÜZENLEME 2: yanı daha netlik için Senaryomun diğer yapıştırın olabilir: P

DÜZENLEME 3: JSfiddle harika! Başvurunuz yüklendiğinde 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

Bildiğim kadarıyla gördüğünüz gibi, sen game.restart() çağrıda bulunuyorlar. Başvurunuz başladığında

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

, sen localStorage anahtar localScore her seferinde Sıfırlanmasını edilir ve son skorları gitti: Ve restart() yöntemi içinde, bunu yapıyoruz. Bir değer olup olmadığını denetlemek için deneyin ve eğer öyleyse, böyle setItem, atlama:

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 
}