对于高中生来说，在简单的HTML/JS应用程序中处理持久状态的简单方法是什么？

Question

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

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

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

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

也许sessionStorage是最好的选择？

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

Answer 1

也许sessionStorage是最好的选择？

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

重要的是要记住，web存储(包括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将其参数强制为string。null胁迫到"null"，这将被解析回null。:-)

另一种方法是使用||

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