Warum werden LocalStorage-Einträge zurückgesetzt, wenn ich die Seite aktualisiere?

Question

Ich mache ein Ratespiel für meine Klasse und wir sollen ein Score-Keeping-System implementieren, das lokal gespeichert wird. Ich dachte, ich hätte das Konzept verstanden, aber es funktioniert nicht so, wie ich es mir vorgestellt habe. Die Werte werden in der localStorage gespeichert, während ich das Spiel spiele, aber wenn ich die Werte aktualisiere, werden die Werte zurückgesetzt ... Jede Einsicht wäre großartig! Unten ist der Anfang meines Skripts und darunter meine HTML-Datei.

EDIT: Der Grund, warum ich Score auf 1 initialisiert ist, weil, wann immer der Benutzer richtig rät, 4 Punkte hinzugefügt werden (+3) und wenn der Benutzer falsch rät, wird 1 Punkt abgezogen (ergibt -2). Jedes Mal, wenn die Schaltfläche "Neustart" angeklickt wird, verliert der Benutzer einen weiteren Punkt.

EDIT 2: könnte genauso gut für den Rest meines Skript für mehr Klarheit einfügen: P

EDIT 3: JSfiddle ist genial! 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

Soweit ich sehen, die Sie anrufen game.restart(), wenn die Anwendung geladen wird. Und in Ihrem restart() Methode, tun Sie das:

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

Wenn die Anwendung gestartet wird, werden Sie die localStorage Schlüssel localScore jedes Mal Reseting, und die letzten Noten sind verschwunden. Versuchen Sie zu überprüfen, ob ein Wert vorhanden ist, und wenn ja, überspringen Sie die setItem, wie folgt aus:

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 
}