Is there anything wrong with this local storage code?

Question

I'm a beginner, and I simply code for fun and make little simple projects. This month I'm trying to make a horse racing "game". This game is the first project that uses local storage, so I'm not exactly familiar on how to code it. I got a basic understanding of it thanks to w3 schools and MDN, but there's still plenty of bugs. The one that bugs me the most is the name changing function. In my code, you can click a button, and a prompt will ask you for a new name for the horse. Then, the screen displays it, and the value is saved to a variable and local storage. However, when I reload the page, the name is not changed, and the screen still displays the default name. Is there any way to fix this?

var horse = {
    energy: false,
    name: false,
    speed: false,
    money: false,
    busy: false,
    hayBale: false,
};

//these are my LS checks and loads...
if(localStorage.getItem("energy") === false) {
    localStorage.setItem("energy", 100);
}
if(localStorage.getItem("name") === false) {
    localStorage.setItem("name", "Give your horse a name!");
}
if(localStorage.getItem("speed") === false) {
    localStorage.setItem("speed", 0);
}
if(localStorage.getItem("busy") === false) {
    localStorage.setItem("busy", 0);
}
if(localStorage.getItem("hayBale") === false) {
    localStorage.setItem("hayBale", 0);
}
if(localStorage.getItem("money") === false) {
    localStorage.setItem("money", 0);
}
horse.name = localStorage.getItem("name");
horse.speed = parseFloat(localStorage.getItem("speed"), 10);
horse.busy = parseInt(localStorage.getItem("busy"), 10);
horse.hayBale = parseInt(localStorage.getItem("hayBale"), 10);
horse.money = parseInt(localStorage.getItem("money"), 10);
horse.energy = parseInt(localStorage.getItem("energy"), 10);

//and this is my name changing function.
$("#horseName").click(function() {
    var newName = prompt("What do you want to rename your horse to? (the name is changable at any time)");
    if(newName !== "" && newName !== false) {
        alert("Success! Your horse is now named '" + newName + "'!");
        document.getElementById("horseName").innerHTML = newName;
        horse.name = newName;
        localStorage.setItem("name", newName);
    } else {
        alert("You didn't enter a name!");
    }
});

score 1 · Accepted Answer · answered Sep 17 '15 at 21:18

Your initial check if value already exists is wrong, so you set the default value again whenever you refresh.

Storage.getItem() returns null when item doesn't exist, so instead of false (which is a valid value to store), check for null:

if(localStorage.getItem("name") === null) { // check for null instead of false
    localStorage.setItem("name", "Give your horse a name!");
}

Don't forget to do it for your other defaults.

score 0 · Answer 2 · edited May 23 '17 at 12:22

if(localStorage.getItem("energy") === false) {
    localStorage.setItem("energy", 100);
}

Here your intention is to check if a value is already in the localstorage, and if not, initialize it with a default value. You expect the localStorage.getItem() function to return false if no value is specified, here lies your mistake.

The function will most likely return null, so you will want to check if localStorage.getItem("key") returns null, instead of false.

I'd also recommend to check for 'undefined' values. See the answer to this question: How can I check if a localstorage variable is null or undefined?

Is there anything wrong with this local storage code?

2 Answers2