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

Question

我是计算机科学教师，有很多的教学Python和Java经验，但没有大量的网络体验。我现在与谁已被分配，他希望在HTML和JS实施一个项目一个高中生的工作。所以这是一个很好的机会让我了解更多关于这种类型的应用。

这是采取在网络上的食品订单，并显示您的订单的说明的应用程序。您可以选择主菜和任何自定义的改变。然后，你选择了一顿，也许是沙拉和任何改变的其他课程。等等。第一页就说明你会显示一个空盘子。您可以选择一门课程来定制，它会带你到一个页面，显示选项，然后另一个网页的其他选项，等等。每个配置完一个选项的时候，它会带你回到起始页面，并显示用餐的照片至今在板（其前身为空）。

我不熟悉的主要部分是处理持久状态。尽管每个页面将具有图像（可能是一个帆布）和按钮的结构独特，它必须记住的顺序被配置在加载每一页。

我想知道什么处理这一个简单的方法就是。这是一个高中生用很少的编程经验，而我让其帮她，但它必须是她的掌握之内全盘了解。

也许是sessionStorage的最好的选择？

关于Persist variables between page loads可能重复，我需要很多比这个问题更复杂 - 我需要存储超过一个全局变量多，我可能需要一个框架来简化这个。特别是，我感兴趣的是这样的方式，是非常简单，高中生，了解使他能够实现它的一些自己（至少一些它必须是自己的工作）。我不知道，如果使用框架会使简单的任务（这将是很好的），或者是否将需要更多的努力来理解框架（尤其是相对于一个没有经验的学生 - 也不好）。

Answer 1

也许是sessionStorage的最好的选择？

当浏览器会话结束如果你想状态为自动失效。否则，使用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
};