Actualmente estoy intentando aprender Javascript y comenzando con un juego incremental muy básico en el que haces clic en un botón y aumenta. Implementé un botón de guardar que se guarda correctamente en el almacenamiento local; sin embargo, al actualizar, se reinicia. Este es el almacenamiento local después de presionar guardar, sin embargo, se restablece a 0 cuando se actualiza la página.
Quería implementar la funcionalidad de guardar de la siguiente manera (ver loadGame() y 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; } }Aquí está mi HTML también si es relevante:
<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 class="GlobalVals">Foodstuffs: </p><span class="GlobalVals" 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>En primer lugar, onunload y onload deben hacer referencia a una función. (Lo que hiciste fue ejecutar la función)
window.onunload = saveGame; window.onload = loadGame;Luego, su código está cargando correctamente saveState, pero no lo está asignando a su variable GlobalFood.
function loadGame(){ var loadSaveStateString = localStorage.getItem('saveState'); saveState = JSON.parse(loadSaveStateString); GlobalFood = saveState.food; var fVal = document.getElementById("GlobalFood"); fVal.innerHTML = GlobalFood; }