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

Question

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

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

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

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

也许 sessionStorage 是最好的选择？

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

Answer 1

Perhaps sessionStorage is the best bet?

如果您希望状态在浏览器会话结束时自动过期。否则，使用 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 returns null 如果没有使用该键存储的数据，并且 JSON.parse 将其参数强制转换为字符串。 null 强制转换为 "null"，后者将被解析回 null。 :-)

另一种方法是使用 ||:

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

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

What is a simple way for a high school student to handle persistent state in a simple HTML/JS app?

html

javascript

session-state