尝试将类中的数据保存到localStorage

Question

I'm very new to programming, very new to Javascript. The professor is not any help, and I'm doing this with a friend (who is also a beginner) and we're both stuck.

We're trying to make a simple game and we're told that we have to use a save and loading feature using localStorage.

My friend handles the game logic while and I'm doing the save and load.

Problem is, I can't figure out how to get the game and player data that I need to put into an object literal that i can stringify and save it into localStorage.

Every time I inspect element in firefox, it says no data present for selected host.

This is my friend's code:

class Game {
    constructor(level, score) 
    {
        // game logic truncated to not clutter..

        this.levelNum = level;

        this.total = score;
        this.hits = 0;
        this.misses = 0;
        this.time = 0;
    }
    // Game methods

    // truncated...
}

class Player
{
    constructor(fName, playerAge)
    {
        this.firstName = fName;
        this.age = playerAge;
    }
    displayInfo()
    {
        return `${this.firstName}, AGE ${this.age}`;
    }
}

// Creating player one
function createPlayer ()
{
    let playerName = document.querySelector("#textbox").value;
    let playerAge = parseInt(document.querySelector("#selectBox").value);

    return new Player(playerName, playerAge);
}
let playerOne = createPlayer();
clickPlay.addEventListener("click", createPlayer());

var playGame;
var gameLevel = 1;

function showLevel()
{
    playGame = new Game(gameLevel);
    let currentLevel = document.querySelector("#levelNum");
    let levelName = document.querySelector("#mathType");
    let playerID = document.querySelector("#playerName");
    let ageID = document.querySelector("#playerAge");

    currentLevel.innerHTML = `${playGame.levelNum}`;
    levelName.innerHTML = `${playGame.mathType}`;
    playerID.innerHTML = `${playerOne.firstName}`;
    ageID.innerHTML = `${playerOne.age}`;

}

clickPlay.addEventListener("click", showLevel());

This is what I've tried and I inserted this at the very end of the above code:

let save_button = document.querySelector("#savBut");

function createUserData(){
  var userData =
  {
    nName: playerOne.firstName,
    nAge: playerOne.age,
    nLevel: playGame.levelNum,
    nMisses: playGame.misses,
    nHits: playGame.hits,
    nSecs: playgame.time
  };
}

clickPlay.addEventListener("click", createUserData();

function saving() {
    // stringify first before storing to userInfo
  localStorage.setItem("userInfo", JSON.stringify(userData));
}

save_button.addEventListener("click", saving);

Answer 1

instead of creating the userData on start of the game, you should create it periodically. For testing I would create it when you click the save button and console out the userData to see if the data is in your object before saving. I would also suggest naming the keys the same as from the objects they came from to make loading the data back easier.

function saving() {
  // stringify first before storing to userInfo
  const userData =
  {
    firstName: playerOne.firstName,
    age: playerOne.age,
    levelNum: playGame.levelNum,
    misses: playGame.misses,
    hits: playGame.hits,
    time: playgame.time
  };
  console.log(userData);
  localStorage.setItem("userData", JSON.stringify(userData));
}

you have probably already been saving your data correctly and it will show up in the developer console under the main tab Application in the local storage list.