Локальное хранилище пока сохраняется

Question

Хорошо, это действительно вызывает у меня головную боль. Некоторое время назад я сделал простую игру под названием «Хрустальный коллектор», в которой пользователю будет дано число (скажем, 112) и ряд кристаллов со скрытыми значениями. Игрок будет пытаться сопоставить число. Если бы он соответствовал этому, он выиграл бы, иначе он проиграл бы. Победы и поражения будут отслеживаться в нижней части. Они не будут упорствовать. Вот программа: https://dennismarkham.github.io/week-4-game/

Теперь я пытаюсь оживить эту игру, добавив постоянное отслеживание статистики с локальным хранилищем. То есть, если пользователь обновляет или покидает страницу, его выигрыши и проигрыши останутся прежними.

Попытка реализовать это привела к странным результатам. Кажется, он отслеживает, но только до определенного момента. Журналы console.logs для выигрышей и проигрышей могут изменяться от нуля до единицы, но никогда не отслеживаются. Что происходит?

//sets a random goal number, set's player number
var goalNumber = Math.floor(Math.random() * 100) + 1;
var playerNumber = 0;

//if there is no variable for wins or losses in local storage, it is set to zero
//else, the "wins" from local storage is achieved and put into the wins variable in
//the script
if (localStorage.getItem("wins") === null) {
  var wins = 0;
} else {
  var wins = localStorage.getItem("wins");
}


if (localStorage.getItem("wins") === null) {
  var losses = 0;
} else {
  var losses = localStorage.getItem("wins");
}

console.log("Wins:" + wins);
console.log("Losses:" + losses);




//gives a random value to blue, green, red, and purple
var blue = Math.floor(Math.random() * 12) + 1;
var green = Math.floor(Math.random() * 12) + 1;
var red = Math.floor(Math.random() * 12) + 1;
var purple = Math.floor(Math.random() * 12) + 1;


//assigns value to the gem pics based on above random numbers
$("#blueGem").attr("value", blue);
$("#greenGem").attr("value", green);
$("#redGem").attr("value", red);
$("#purpleGem").attr("value", purple);


//puts goal number variable in goal number box
$("#goalNumber").text(playerNumber);

//puts player number variable in player box
$("#playerNumber").text(goalNumber);

//puts wins in wins box (ccurrently at zero)
// $("#wins").text(wins);

// //puts losses in losses box
// $("#losses").text(losses);


//when you click one of the gems
$("img").click(function() {
  //playerNumber equals whatever it was before plus the value of the gem
  playerNumber = playerNumber + parseInt($(this).attr("value"));


  if (playerNumber == goalNumber) {
    //if the player number meets the goal number,
    //a non-existent varaible called wins is incremented.
    //see, how do I set up wins, without having it reset every refresh!?
    //So maybe check if there's already a value in local storage, and if not, 
    //assign it to
    //zero.
    //So at the top of the page "if wins in localstorage = true, wins = 
    //localStorage.getItem(wins)"
    //else, wins = 0.
    wins++;

    localStorage.setItem("wins", wins);

    var x = screen.width / 2 - 500 / 2;
    var y = screen.height / 2 - 350 / 2;
    window.open("win.html", "_blank", 'height=385,width=500,left=' + x + ',top=' + y);

    //if you win, goal number is reset, player number is reset, and so are gem 
    //values
    goalNumber = Math.floor(Math.random() * 120) + 1;
    playerNumber = 0;


    blue = Math.floor(Math.random() * 12) + 1;
    green = Math.floor(Math.random() * 12) + 1;
    red = Math.floor(Math.random() * 12) + 1;
    purple = Math.floor(Math.random() * 12) + 1;

    $("#blueGem").attr("value", blue);
    $("#greenGem").attr("value", green);
    $("#redGem").attr("value", red);
    $("#purpleGem").attr("value", purple);

  }

  if (playerNumber > goalNumber) {
    losses++;

    localStorage.setItem("losses", losses);

    var x = screen.width / 2 - 500 / 2;
    var y = screen.height / 2 - 350 / 2;
    window.open("loss.html", "_blank", 'height=385,width=500,left=' + x + ',top=' + y);

    //if you lose, all those numbers are reset as well.     
    goalNumber = Math.floor(Math.random() * 100) + 1;
    playerNumber = 0;

    blue = Math.floor(Math.random() * 10) + 1;
    green = Math.floor(Math.random() * 10) + 1;
    red = Math.floor(Math.random() * 10) + 1;
    purple = Math.floor(Math.random() * 10) + 1;

    $("#blueGem").attr("value", blue);
    $("#greenGem").attr("value", green);
    $("#redGem").attr("value", red);
    $("#purpleGem").attr("value", purple);
  }

  //this displays the playerNumber and goalNumber in their appropriate divs 
  //after each click
  $("#goalNumber").text(playerNumber);

  $("#playerNumber").text(goalNumber);

  // $("#wins").text(wins);

  // $("#losses").text(losses);






  //this extracts them from local storage to be printed.
  $("#wins").text(localStorage.getItem("wins"));

  $("#losses").text(localStorage.getItem("losses"));

  //now the problem is once you hit refresh, wins and losses go back to zero.  
  //Is that because
  //the computer starts reading from the top again?





});


$("button").click(function() {
  confirm("Are you sure you want to delete your stats?");

  if (confirm) {
    localStorage.clear();
  }
})

Answer 1

localalstorage сохранить вещь как строку, я думаю, что вы должны разобрать ее кстати линия

var losses = localStorage.getItem("wins");

кажется опечатка копирования копии (это должны быть "потери")

if (localStorage.getItem("wins") === null) {
    var wins = 0;
    var losses = 0;
}
else 
{
    var wins = parseInt(localStorage.getItem("wins"));
    var losses = parseInt(localStorage.getItem("losses"));
}