Why does my localStorage variable break on a page refresh?

Question

I have another problem with my Simon game code. I've added a localStorage variable to save the high score between page loads. Obviously the high score is only supposed to increase as your score surpasses it, and then the localStorage variable is supposed to capture that new score. On a reload my localStorage variable just adds the number 1 to the end of the high score. So say you've set a high score of 16 and you close the page to go do something else, and then when you come back to play more later your high score of 16 is there on the page load. You click 'start' to begin the game, and as you select the correct input your high score goes to 161, and 1611 etc.

Here is all the relevant code:

var score = 0;
var level = 0;
//Call high score from localStorage or display the same int as score
var highScore = localStorage.getItem("highScore") || score;

$("#score").html(`${score}`); //Display score on webpage
$("#level").html(`${level}`); //Display level on webpage
$("#high-score").html(`${highScore}`); //Display high score on webpage

//Game logic
$("#start-button").on("click", function() {
    var buttons = document.getElementsByClassName("js-button");
    var buttonsToClick = chooseRandomButtons(buttons);
    currentButtons = buttonsToClick;
    flashButtons(buttonsToClick, 0);
    //Every time the start button is pressed, increment level count by 1
    level += 1;
    $("#level").html(`${level}`);

  var currentOrder = 0;
  $(".js-button").off("click").on("click", function() {
    var selectedButton = $(this)[0];
    var button = currentButtons[0];
    //Check input matches array
    if (selectedButton === button) {
        currentButtons.splice(button,1);
        //When a correct input is recorded, increment score & high score by 1
        score += 1;
        highScore += 1;

        $("#score").html(`${score}`);
        $("#high-score").html(`${highScore}`);

        //Display win message if you reach the end of the array
        if (score == 111 || score == 100 || score == 98 || score == 88 || score == 78
            || score == 69 || score == 60 || score == 52 || score == 44 || score == 37
            || score == 30 || score == 24 || score == 18 || score == 13 || score == 8
            || score == 4) {
            alert("Well done! Click start to begin the next level");
            }
    //Display restart message if input does not match array
    } else {
        currentButtons = buttonsToClick;
        alert("Sorry, that was wrong. Click 'Start' to try again");
        score = 0;
        level = 0;
        $("#score").html(`${score}`);
        $("#level").html(`${level}`);

        localStorage.setItem("highScore", highScore); //Set persistent high score through page loads
    }
  });

})

Answer 1

localStorage stores strings. You are getting an implicit conversion. Basically score + (1).toString()

You should be checking if the score is higher than the high score before setting the value. I've omitted the number conversion, because there is implicit conversion, so it's not needed. But I'd recommend you add it in anyways, just to avoid problems.

replace highScore += 1; with

  if (score > highScore)
        highScore = score;

Below not actually needed to fix your code, but you should be doing this anyways:

var highScore = parseInt(localStorage.getItem("highScore")) || score;

Answer 2

Your local storage is string.

change:

var highScore = localStorage.getItem("highScore") || score;

to:

var highScore = +localStorage.getItem("highScore") || score;

Answer 3

Type of localStorage is String you must convert the localStorage to Number type,like below code:

Number(localStorage.getItem("highScore"))

for more information about localStorage read this document