javascript - 从存储加载在控制台中有效，但在页面加载时无效

Question

编辑：问题已解决。显然，页面加载的速度不够快，以至于引用的 id 就位。如下添加事件侦听器解决了该问题：

window.addEventListener('load', function() {stuff that's supposed to happen})

在我创建一个小游戏的毫无头绪的旅程中，我目前正在努力保存到用户的本地存储并从用户的本地存储中加载。虽然保存似乎正在工作，但加载却没有，除非我手动将相应的命令放入控制台。

这是起作用的代码片段：

//definition of variables

var dayLength = 10;

//if function to check if there's stored data, loading it and changing the document accordingly

if ( localStorage.saveExists === "true" ) {
    dayLength = Number(localStorage.dayLength);

    document.getElementById("displayDayLength").innerHTML = dayLength.toFixed(3);

}

var loadingAttempted = "true";

//function to save which occurs every 15 seconds (or through a button click)

function saveAuto() {
    if ( loadingAttempted === "true" ) {
        var saveExists = "false";
        
        localStorage.saveExists = "true";
        localStorage.dayLength = dayLength;
}

当本地存储中没有数据时（换句话说，如果 saveExists = "false"），站点将不会尝试加载某些内容并按预期工作。当本地存储中有数据时，文件会尝试加载它（到目前为止它可以工作）。

但是，我会在应该根据加载的数据更改文档的行中收到错误，声称 dayLength 为“null”。

如果我随后手动将 localStorage.dayLength 输入到控制台中，它会返回“10”，因为它应该。我知道将数据存储到本地存储中是可行的，因为否则用于加载的 if 函数将不知道 (saveExists === "true")，因此不会做任何事情。但无论出于何种原因，它都无法正确加载任何其他数据并返回“null”，除非我手动将完全相同的代码放入控制台。

最好的部分是，我从另一个做完全相同的事情的小游戏中得到了整个想法，并且它完美地工作。

我完全不知道为什么它在另一个项目中有效，但不适用于我的。

教育我，如果你愿意的话。并提前感谢您。

PS：我也尝试使用 localStorage.setItem 和 localStorage.getItem，但问题仍然存在。

标签： javascript