在本地存储中保存游戏会导致 [object Object] 和未定义答案

【问题标题】：Saving game in local storage results in [object Object] and undefined在本地存储中保存游戏会导致 [object Object] 和未定义
【发布时间】：2021-09-24 21:38:29
【问题描述】：

model 是一个对象，它以数组和对象的形式包含我的代码中的每个变量。我想在使用 saveGame 函数时保存其中的值的快照，然后在使用 loadGame 函数时将其重新定义为该快照。但是，当我使用 loadGame() 时，它返回 [object Object]，然后其中的每一条信息都变得未定义。什么给了？

function saveGame() {
    localStorage.setItem('model', model);
}
function loadGame() {
    model = localStorage.getItem('model');
    updateView();
}

【问题讨论】：

标签： javascript save local-storage loading

【解决方案1】：

根据MDN web docs，存储在localStorage 中的键和值始终为UTF-16 DOMString 格式。

因此，您不能将对象存储在 localStorage 中。因为它只接受字符串。你提到的[object Object] 是一个对象的字符串表示，它使用默认的Object.toString() 方法自动创建。

将对象转换为字符串表示并保留变量。您可以使用JSON.stringify() 将对象序列化为 JSON 字符串。然后使用JSON.parse() 反序列化它，将其转换回一个对象。

function saveGame() {
    localStorage.setItem('model', JSON.stringify(model));
}
function loadGame() {
    model = JSON.parse(localStorage.getItem('model'));
    updateView();
}

【讨论】：

我试过这个，它似乎工作得很好。但是，现在我加载它后它甚至不再使用该模型了。当我从模型中设置特定值时它工作得很好，但显然不是当我存储和加载整个模型时。有点奇怪。我的 updateView() 函数调用的变量不会根据我刚刚在 loadGame() 中设置的模型而改变。
如果我的回答对您有帮助，请单击复选标记将其标记为已接受。我为我的答案添加了更深入的解释。无法为您提供更多帮助，因为我没有上下文。如果您遇到不同的问题，您可以考虑在 SO 上提出另一个问题。在做了一些研究并试图自己解决这个问题之后。祝你好运。