Javascript 使用HTML5 web存储在HTML页面上保存用户输入

我正在创建一个纵横字谜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();      
}
}

函数应答（）{
if（this.value！=''）{
变量字母=此.value.split（“”）；
var correct=xmlhttp.responseXML.getElementsByTagName（节点）[0].getAttribute（'a'）.split（''）；
var numCorrect=0；
对于（变量i=0；i

我的问题是，如何保存拼图和XML的状态（使用HTML5Web存储），以便用户可以脱机玩，并防止他们在浏览器刷新时丢失进度

有人能帮我解决这个问题吗？我不太熟悉HTML Web存储API…但我听说它是Web应用程序的一个有价值的工具。非常感谢你的建议

谢谢，

---

Carlos

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

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

然后，您可以稍后使用

var savedGame = localStorage["NAME"];

---

不过有一个警告，它将在除IE之外的所有浏览器上工作，因为它们使用其他东西作为本地存储。

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

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

然后，您可以稍后使用

var savedGame = localStorage["NAME"];

---

一个警告，它将对所有浏览器工作，除了IE，因为它们使用其他的东西作为本地存储。

< P>除非你的应用程序依赖于HTML5，否则你可能会考虑使用一个类似于存储本地存储的库，但也可以为其他具有存储机制的浏览器提供替代的实现。但不是本地存储。如果你选择Lawnchair，那么我建议你将其与

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

value=l（c/s）cache.get（“key”）

l（c/s）缓存。设置（“键”，值）

l（c/s）缓存。删除（“密钥”）

---

这很简单，因为它可以保存东西，把它拿回来，等等。另外，对于你只想储存一段时间的东西。当您用一个集合将其放入缓存中时，您可以指定它到期多长时间。

< P>除非您的应用程序依赖于HTML5，否则您可能会考虑使用一个类似于存储本地存储的库，但也可以为具有存储机制的其他浏览器提供替代的实现，而不是本地存储。如果你选择Lawnchair，那么我建议你将其与

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

value=l（c/s）cache.get（“key”）

l（c/s）缓存。设置（“键”，值）

l（c/s）缓存。删除（“密钥”）

---

这很简单，因为它可以保存东西，把它拿回来，等等。另外，对于你只想储存一段时间的东西。当您将它与一个集合一起放入缓存时，您可以指定它过期的时间。

感谢您的快速响应，但对于如何实现这一点，我仍然有点不知所措。为了澄清这一点，我可以简单地在javascript中输入上面的代码，然后用按钮中的onClick或onRefresh激活它吗？还是还有更多？“NAME”参数可以是我选择的任何参数吗？当然可以！是的，你可以用任何你想命名的东西来替换这个名字。“NAME”是关键值。感谢您的快速响应，但在如何实现这一点上，我仍然有点不知所措。为了澄清这一点，我可以简单地在javascript中输入上面的代码，然后用按钮中的onClick或onRefresh激活它吗？还是还有更多？“NAME”参数可以是我选择的任何参数吗？当然可以！是的，你可以用任何你想命名的东西来替换这个名字。“NAME”是键值。