javascript - 如果网页位于 USB 棒上，如何保留网页中的数据

Question

我正在尝试做一个小的 html 测验，可以从任何平台上的 USB 棒上的浏览器开始。

测验真的很简单。用户打开网页并看到第一个问题。他可以点击答案 A、B、C 或 D。用户点击 A、B、C 或 D 后，他会得到正确的答案以及判断对错的消息。然后他被问到下一个问题。等等。

最后，他得到一个页面，显示有多少问题被正确回答。这就是测验的全部内容。

目前的问题是，我怎样才能保持用户从一页到另一页的重点？我应该使用cookies吗？还是有更好的方法来存储“点”？

Answer 1

有一天，我创建了这样的测验。就我而言，重点是使用 JSON 存储问题（已通过 ajax 从本地文件加载 json）和答案，因此我能够为用户随机选择问题，然后在 js 变量中保存正确答案/错误的数量。

<div id="question">Load question there</div>
<ul>
    <li id="answer-1">load first answer</li>
    <li>and so on...</li>
</ul>

使用jQuery.getJSON从文件加载 json 很容易：

$.getJSON('./questions.json', function(json) {
    // save json somewhere for futher use.
});

测验结束后，我使用 ajax 加载带有测验摘要的页面，其中我准备了“锚点”以动态插入正确答案的数量。一切都没有任何页面重新加载。

但是你必须记住，Chrome 浏览器不接受 ajax 的 file:// 协议，所以这种方法在 Chrome 中不起作用。可以在此处找到有关此问题的其他信息。

Answer 2

您可以查看 HTML5 本地存储：

http://diveintohtml5.info/storage.html

这将允许您将数据存储在本地计算机上。API 比 cookie 更灵活一些，缺点是只能在最新的浏览器上运行。如果你也想支持旧版本，你需要一个 polyfill。以下列表包含用于本地存储的 polyfill：https ://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

注意：您只能将数据保存到本地计算机，不能保存到 U 盘。浏览器不允许您直接将数据保存到 U 盘，因此数据将无法移植到另一台 PC。