使用HTML5网络存储在HTML页面上保存用户输入

我正在创建一个纵横字谜网络应用程序，它从服务器拉取XML数据，使用javascript解析数据并使用[canvas]标记在页面上构建拼图。当用户选择一条线索并输入正确答案时，字母会放在纵横字谜的相应方格中。使用HTML5网络存储在HTML页面上保存用户输入

下面是放置字母对应的方格的代码片段：

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 API不是很熟悉......但是我听说它是一个有价值的网络应用工具。你的意见将不胜感激。

感谢，卡洛斯

来源

2011-08-29 Carlos

您可以使用下面的JavaScript拯救HTML5本地存储空间内的JSON对象或程序的状态：

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

，那么你可以在以后用它拿来虽然

var savedGame = localStorage["NAME"];

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

来源

2011-08-29 03:19:17 Infinity

感谢您的快速响应，但是如何实现这一点，我仍然有点失落。只是为了澄清，我可以简单地在我的JavaScript中输入上面的代码，然后用按钮或onRefresh中的onClick激活它，例如？或者还有更多吗？ “NAME”参数可以是我选择的任何东西吗？ – Carlos

绝对！是的，你可以用任何你想要命名你的对象的名字来代替这个名字。 “NAME”是关键价值。 – Infinity

除非您的应用程序的其余部分依赖于HTML5，否则可以考虑使用像Lawnchair这样的库来包装localStorage，但也可以为其他具有存储机制的浏览器提供替代实现，但不提供localStorage。如果你真的和Lawnchair一起去，那么我建议你将它与lccache配对。

如果您决定跳过Lawnchair并只保留localStorage，那么我建议您将它与lscache配对。 lscache和lccache都是简化了API的包装器：

value = 1（c/s）cache.get（“key”）; （c/s）cache.set（“key”，value）;（c/s）cache.set（“key”，value）; （c/s）cache.remove（“key”）;（c/s）cache.remove（“key”）;

这就像它可以保存的东西一样简单，让它退出等。另外，对于你只想存储一段时间的东西。当您将其放入缓存中时，您可以指定它到期的时间。

来源

2011-08-29 04:11:41

使用HTML5网络存储在HTML页面上保存用户输入

回答

相关问题