जब मैं पृष्ठ को रीफ्रेश करता हूं तो स्थानीय स्टोरेज प्रविष्टियां रीसेट क्यों होती हैं?

Question

मैं अपनी कक्षा के लिए अनुमान लगाने वाला गेम बना रहा हूं और हमें स्थानीय स्तर पर संग्रहीत स्कोर रखने वाली प्रणाली को लागू करना है। मैंने सोचा कि मैं अवधारणा को समझ गया हूं लेकिन यह जिस तरह से मैं चाहता हूं वह काम नहीं कर रहा है। जब मैं गेम खेलता हूं, तो स्थानीय स्टोरेज में मान संग्रहीत होते हैं, हालांकि जब मैं रीफ्रेश करता हूं, मान रीसेट हो जाते हैं ... कोई अंतर्दृष्टि बहुत अच्छी होगी! नीचे मेरी लिपि की शुरुआत है, और नीचे यह मेरी HTML फ़ाइल है।

संपादित करें: जिस कारण से मैंने 1 से स्कोर शुरू किया है, क्योंकि जब भी उपयोगकर्ता सही ढंग से अनुमान लगाता है, 4 अंक जोड़े जाते हैं (+3 उत्पन्न करते हैं) और जब उपयोगकर्ता गलत लगता है, तो 1 बिंदु काटा जाता है (उपज -2)। प्रत्येक बार पुनरारंभ बटन क्लिक होने पर, उपयोगकर्ता एक और 1 बिंदु खो देता है।

संपादित करें 2: रूप में अच्छी तरह से अधिक स्पष्टता के लिए मेरी स्क्रिप्ट के बाकी पेस्ट करना चाहें: पी

संपादित करें 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 हर बार reseting रहे हैं, और अपने पिछले स्कोर चले गए हैं। यदि हां, तो 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 
}