Question

我正在创建一个填字游戏网络应用程序，它从服务器提取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网络存储）的状态，以便用户可以脱机播放并防止他们在浏览器刷新时丢失进度？

任何人都可以帮我解决这个问题，我对HTML Web Storage API并不是很熟悉......但我听说它是一个非常有用的网络应用工具。非常感谢您的建议。

谢谢，卡洛斯

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（ “钥匙”）;

这就像它可以保存的东西一样简单，让它恢复原状等等。另外，对于你只想存储一段时间的东西。当您使用集合将其放入缓存时，您可以指定它到期的时间。

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

2 个答案: