HTML5 web storage integer becomes NaN

Question

Can anyone explain why last line results in NaN? 'userScore' is an object of a span element and similar operations work perfectly fine when I don't implement the localStorage part. Many thanks in advance!

    var score;
    score = 20 - (parseInt(turnNr.innerHTML) - bricks.length / 2) * 
    1.2;
    if (score >= 0.5) {
        score = Math.round(score);
    } else {
        score = 0;
    }

    if (localStorage.totalScore) {
       localStorage.totalScore = parseInt(localStorage.totalScore) + 
        score;
    } else {
        localStorage.totalScore = score;
    }
    userScore.innerHTML = localStorage.totalScore;

Answer 1

Your code cannot recover from errors. Once you have stored "NaN" in localStorage, it never will go away when the code is executed. That's because if (localStorage.totalScore) will run even when there's an invalid value.

You'll want to change your code to

if (parseInt(localStorage.totalScore)) { // NaN is falsy and will be ignored
   localStorage.totalScore = parseInt(localStorage.totalScore) + score;
} else {
    localStorage.totalScore = score;
}
userScore.innerHTML = localStorage.totalScore;