使用 HTML5 Web 存储保存 HTML 页面上的用户输入

Question

我正在创建一个填字游戏 Web 应用程序，它从服务器提取 XML 数据，使用 JavaScript 解析数据，并使用 [canvas] 标签在页面上构建谜题。当用户选择线索并输入正确答案时，字母就会被放置在填字游戏的相应方块中。

下面是将字母放置在相应方块中的代码片段：

function answer() {
if (this.value != '') {
    var letters = this.value.split('');
    var correct = xmlhttp.responseXML.getElementsByTagName(node)[0].getAttribute('a').split('');
    var numCorrect = 0;
    for (var i = 0; i < selected.length; i++) {
        if (letters[i]) {
            if (letters[i].toUpperCase() == correct[i]) {
                eval('ctx.drawImage(i'+letters[i].toLowerCase()+'b, '+((selected[i].id%15)*26)+', '+(Math.floor(selected[i].id/15)*26)+')');
                matrix[selected[i].id] = 1;
                numCorrect++;
            } else {
                matrix[selected[i].id] = 0;
            }
        }
    }       
    if (numCorrect == correct.length) {
        alert('Correct!');
        clearSelection();

    } else if (numCorrect == 0) {
        alert('Incorrect, try again.');
        document.getElementById('answer').value = '';
        document.getElementById('answer').focus();
    } else if (numCorrect != correct.length) {
        alert('Only some letters are correct.');
        clearSelection();
    }
    checkForWin();      
}
}

我的问题是，如何保存拼图的状态和 XML（使用 HTML5 Web 存储），以便用户可以离线玩游戏并防止他们丢失浏览器刷新时他们的进度如何？

任何人都可以帮我解决这个问题吗？我对 HTML Web Storage API 不太熟悉……但我听说它对于 Web 应用程序来说是一个很有价值的工具。我们将非常感谢您的建议。

谢谢， 卡洛斯

Answer 1

您可以使用以下 JavaScript 将 JSON 对象或程序的状态保存在 html5 本地存储中：

if(localStorage)
 localStorage.setItem("NAME", JSON/XML Object);

然后您可以稍后使用

var savedGame = localStorage["NAME"];

一个警告来获取它，但它适用于除 IE 之外的所有浏览器，因为它们使用其他浏览器作为本地存储。

Answer 2

除非应用程序的其余部分依赖于 HTML5，否则您可能会考虑使用 Lawnchair 之类的库来包装 localStorage，但也可以为其他具有存储机制但没有 localStorage 的浏览器提供替代实现。如果您确实使用 Lawnchair，那么我建议将其与 lccache 配对。

如果您决定跳过 Lawnchair 并仅使用 localStorage，那么我建议您将其与 lscache 配对。 lscache 和 lccache 都是包装器，可将 API 简化为：

value = l(c/s)cache.get("key");

l(c/s)cache.set("key", value);

l(c/s)cache.remove("key");

这很简单，因为它可以保存东西，将其取回等等。另外，对于你只想存储一段时间的东西。当你将它放入缓存时，你可以指定它过期的时间。