javascript - 高中生在简单的 HTML/JS 应用程序中处理持久状态的简单方法是什么？

Question

我是一名计算机科学导师，拥有丰富的 Python 和 Java 教学经验，但没有太多网络经验。我现在正在与一名高中生一起工作，他被分配了一个他希望用 HTML 和 JS 实现的项目。所以这对我来说是一个很好的机会来了解更多关于这种类型的应用程序。

这是一个用于在网络上接受食品订单并显示您的订单插图的应用程序。您可以选择主菜和任何自定义更改。然后你选择另一道菜，也许是沙拉和任何改变。等等。它显示的第一页将显示一个空盘子。您选择要自定义的类(class)，它会将您带到一个显示选项的页面，然后是另一个包含更多选项的页面，依此类推。每次您完成一个选项的配置时，它都会带您回到起始页面，并在盘子(以前是空的)上显示到目前为止的餐食图片。

我不熟悉的主要部分是处理持久状态。虽然每个页面都有独特的图像结构(可能是 Canvas )和按钮，但它必须记住加载每个页面时配置的顺序。

我想知道处理这个问题的简单方法是什么。这是一个高中生，之前的编程经验很少，我可以帮助她，但必须在她的掌握范围内才能全面理解。

也许 sessionStorage 是最好的选择？

关于 Persist variables between page loads 的可能重复，我的需求比那个问题复杂得多——我需要存储不止一个全局变量，我可能需要一个框架来简化这个。特别是，我感兴趣的是以一种足够简单的方式让高中生理解，这样他就可以自己实现其中的一些(至少其中一些必须是他自己的作品)。我不知道使用框架是否会使工作更简单(那会很好)，或者是否需要更多的努力来理解框架(尤其是相对于没有经验的学生——不好)。

Answer 1

Perhaps sessionStorage is the best bet?

如果希望状态在浏览器 session 结束时自动过期。否则，请使用 localStorage，它会持续更长时间。

重要的是要记住网络存储(sessionStorage 和 localStorage)只存储字符串，所以一个常用的技术是使用它来存储您在加载时解析的 JSON，因此您可以拥有复杂的状态。例如:

// On load
var state = JSON.parse(localStorage.getItem("state-key"));
if (!state) {
    // None was stored, create some
    state = {/*...default state...*/};
}

// On save
localStorage.setItem("state-key", JSON.stringify(state));

注意这个位:

var state = JSON.parse(localStorage.getItem("state-key"));
if (!state) {

依赖于 getItem 返回 null 如果没有使用该键存储的数据，并且 JSON.parse 将其参数强制为字符串。 null 强制转换为 "null"，它将被解析回 null。 :-)

另一种方法是使用||:

var state = JSON.parse(localStorage.getItem("state-key")) || {
    // default state here
};