Why do localStorage entries get reset when I refresh the page?

Question

I'm making a guessing game for my class and we're supposed to implement a score keeping system that is stored locally. I thought I understood the concept but it's not working the way I intended it to. The values are stored in the localStorage while I play the game, however when I refresh, the values reset... Any insight would be great! Below is the beginning of my script, and below that is my HTML file.

EDIT: The reason I initialized score to 1 is because whenever the user guesses correctly, 4 points are added (yielding +3) and when the user guesses wrong, 1 point is deducted (yielding -2). Each time the restart button is clicked, the user loses another 1 point.

EDIT 2: might as well paste the rest of my script for more clarity :P

EDIT 3: JSfiddle is awesome! 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

As far as I see, you are calling game.restart() when your application is loaded. And inside your restart() method, you are doing this:

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

When your application starts, you are reseting the localStorage key localScore every single time, and your last scores are gone. Try to check if a value exists, and if so, skip the setItem, like this:

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
}