Localstorage resetting on refresh-CodePudding

I am currently attempting to learn Javascript and starting with a very basic incremental game where you click a button and it increases. I implemented a save button that properly saves to local storage, however upon refresh, it gets reset. This is the local storage after hitting save, however, it gets reset to 0 when the page is refreshed.

I wanted to implement save functionality in the following way (see loadGame() and saveGame()):

// JavaScript Document

var saveState = {
    food: 0
};

var GlobalFood = 0;

window.onunload = saveGame();
window.onload = loadGame();

function loadGame(){
    var loadSaveStateString = localStorage.getItem('saveState');
    saveState = JSON.parse(loadSaveStateString);
}

function saveGame(){
    var saveStateString = JSON.stringify(saveState);
    localStorage.setItem('saveState', saveStateString);
}

function tutorialFoodBtnFunc() {
    var fVal = document.getElementById("GlobalFood");
    GlobalFood  ;
    fVal.innerHTML = GlobalFood;
    saveState['food'] = GlobalFood;
}

function tutorialFoodBtnFunc2() {
    var fVal = document.getElementById("GlobalFood");
    if(GlobalFood < 1)
    {
        var foodError = document.getElementById("foodErrorText");
        foodError.classList.add("fade-in");
        setTimeout(function (){
            foodError.classList.remove("fade-in");
        }, 2000)
    }
    else
    {
        GlobalFood--;
        fVal.innerHTML = GlobalFood;
        saveState.food = GlobalFood;
    }
}

Here's my HTML as well if it's relevant:

<html>
<head>
    <meta charset="utf-8">
    <title>Wilderness</title>
    <link rel="stylesheet" href="styling/tutorial.css">
    <script src="js/main.js"></script>
</head>
    <div id="page-wrapper">
        <body>
            <div id="nav">
                <p >Foodstuffs: </p><span  id = "GlobalFood">0</span>
            </div>
            <div id="tutorialBody">
                <button id="tutorialFoodBtn" onclick="tutorialFoodBtnFunc()">Gather Berries</button>
                <button id="tutorialFoodBtn2" onclick="tutorialFoodBtnFunc2()">Eat Berries</button>
                <p id="foodErrorText">You have no berries!!!</p>
                <button id="tutorialFoodBtn2" onclick="saveGame()">Save!!</button>
            </div>
        </body>
    </div>
</html>

CodePudding user response：

First of all, onunload and onl oad should reference a function. (What you did is execute the function)

window.onunload = saveGame;
window.onload = loadGame;

Then, your code is properly loading the saveState, but you're not assigning it to your GlobalFood variable.

function loadGame(){
    var loadSaveStateString = localStorage.getItem('saveState');
    saveState = JSON.parse(loadSaveStateString);
    GlobalFood = saveState.food;
    var fVal = document.getElementById("GlobalFood");
    fVal.innerHTML = GlobalFood;
}