CODEWITHSUNDEEP
javascripthtml
TheoDePro
TheoDePro

Reputation: 41

JavaScript localStorage NaN error

I am making a game with html and JavaScript. A saving system is included into the game I did this with localStorage. When I open the html file from my computer everything goes fine. Everything saves in localStorage and everything loads perfectly... But when I uploaded the files to my website where the game is located On every value there comes NaN... I know that means Not a Number but I do not get it. Why does this work on my computer but not on my website?

Here is the saving and loading part of the game!

var save_format=1;
function save(){
    localStorage.setItem("game_saved_before", save_format);
    localStorage.setItem("Money", Money);
    localStorage.setItem("DrinksSold", DrinksSold);
    localStorage.setItem("Price", Price);
    localStorage.setItem("Plants", Plants);
    localStorage.setItem("CompetitorBonus", CompetitorBonus);
    localStorage.setItem("Meals", Meals);
    localStorage.setItem("MealsLeft", MealsLeft);
    localStorage.setItem("MealCost", MealCost);
    localStorage.setItem("Werknemers", Werknemers);
    localStorage.setItem("WerknemerCost", WerknemerCost);
    localStorage.setItem("nextCostWerknemer", nextCostWerknemer);
    localStorage.setItem("StreetLicenses", StreetLicenses);
    localStorage.setItem("StreetLicensesHomeTown", StreetLicensesHomeTown);
    localStorage.setItem("StreetLicenseCost", StreetLicenseCost);
    localStorage.setItem("nextCostStreetLicense", nextCostStreetLicense);
    localStorage.setItem("HigherPriceCost", HigherPriceCost);
    localStorage.setItem("nextHigherPriceCost", nextHigherPriceCost);
    localStorage.setItem("PlantCost", PlantCost);
    localStorage.setItem("nextPlantCost", nextPlantCost);   
    localStorage.setItem("nextMealCost", nextMealCost);
    localStorage.setItem("DestroyCompetitorCost", DestroyCompetitorCost);
}


function load_game(){
    if(parseInt(localStorage.getItem("game_saved_before") === save_format){
    if(localStorage.getItem("game_saved_before") !== null){
    // or:
    if(localStorage["game_saved_before"] !== undefined){
    // or:
    if(typeof(localStorage.getItem("game_saved_before")) !== "string"){
        Money = parseInt(localStorage.getItem("Money"));
        DrinksSold = parseInt(localStorage.getItem("DrinksSold"));
        Price = parseFloat(localStorage.getItem("Price"));
        Plants = parseInt(localStorage.getItem("Plants"));
        CompetitorBonus = parseInt(localStorage.getItem("CompetitorBonus"));
        Meals = parseInt(localStorage.getItem("Meals"));
        MealsLeft = parseInt(localStorage.getItem("MealsLeft"));
        MealCost = parseInt(localStorage.getItem("MealCost"));
        Werknemers = parseInt(localStorage.getItem("Werknemers"));
        WerknemerCost = parseInt(localStorage.getItem("WerknemerCost"));
        nextCostWerknemer = parseInt(localStorage.getItem("nextCostWerknemer"));
        StreetLicenses = parseInt(localStorage.getItem("StreetLicenses"));
        StreetLicensesHomeTown = parseInt(localStorage.getItem("StreetLicensesHomeTown"));
        StreetLicenseCost = parseInt(localStorage.getItem("StreetLicenseCost"));
        nextCostStreetLicense = parseInt(localStorage.getItem("nextCostStreetLicense"));
        HigherPriceCost = parseInt(localStorage.getItem("HigherPriceCost"));
        nextHigherPriceCost = parseInt(localStorage.getItem("nextHigherPriceCost"));
        PlantCost = parseInt(localStorage.getItem("PlantCost"));
        nextPlantCost = parseInt(localStorage.getItem("nextPlantCost"));
        nextMealCost = parseInt(localStorage.getItem("nextMealCost"));
        DestroyCompetitorCost = parseInt(localStorage.getItem("DestroyCompetitorCost"));
    }
}
}
}
}
load_game();
setInterval(save,1000);

I have been thinking is it because I can't reach there localStorage? Please help me I really need this and I have been trying to find an answer for days.

Upvotes: 1

Views: 3765

Answers (1)

lossleader
lossleader

Reputation: 13495

issue

Your check to make sure you have localStorage values is invalid:

if(typeof(localStorage.getItem("game_saved_before")) != undefined){

getItem returns null and typeof(null) is object.

Consequently, all your other calls can evaluate to parseInt(null) which is NaN.

immediate solution

A direct fix would be:

if(localStorage.getItem("game_saved_before") !== null){

or:

if(localStorage["game_saved_before"] !== undefined){

or:

if(typeof(localStorage.getItem("game_saved_before")) === "string"){

But then you have to make sure you localStorage.clear() to get rid of all the properties with values of "NaN".

Adding Versioning

I think you are already running into issues of old configs that you could avoid by versioning:

var save_format=1; // increment on breaking save format changes

save()
   localStorage.setItem("game_saved_before", save_format)
...

load_game()
   if(parseInt(localStorage.getItem("game_saved_before")) === save_format){
...

A drawback of this approach is that you are still saving things piecemeal, so legacy properties from one version may end up coexisting with future versions unless you use removeItem.

Upvotes: 4

Related Questions