javascript - 这个本地存储代码有问题吗？

Question

我是一名初学者，我只是为了好玩而编写代码并制作一些简单的项目。这个月我正在尝试制作一款赛马“游戏”。这个游戏是第一个使用本地存储的项目，所以我不太熟悉如何编码。感谢 w3 学校和 MDN，我对它有了基本的了解，但仍然有很多 bug。最让我烦恼的是改名功能。在我的代码中，您可以单击一个按钮，然后会出现提示，要求您为马起一个新名称。然后，屏幕显示它，并将该值保存到变量和本地存储中。但是，当我重新加载页面时，名称没有更改，屏幕仍然显示默认名称。有什么办法可以解决这个问题吗？

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!");
    }
});

Answer 1

您最初检查值是否已存在是错误的，因此每次刷新时都会再次设置默认值。

Storage.getItem()当项目不存在时返回 null，因此不要使用 false(这是要存储的有效值)，而是检查 null:

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

不要忘记对其他默认值执行此操作。