使用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不是很熟悉......但是我听说它是一个有价值的网络应用工具。你的意见将不胜感激。
感谢, 卡洛斯
您可以使用下面的JavaScript拯救HTML5本地存储空间内的JSON对象或程序的状态:
if(localStorage)
localStorage.setItem("NAME", JSON/XML Object);
,那么你可以在以后用它拿来虽然
var savedGame = localStorage["NAME"];
一个警告,它会在所有浏览器,除了IE,因为他们使用别的东西作为本地存储。
除非您的应用程序的其余部分依赖于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”);
这就像它可以保存的东西一样简单,让它退出等。另外,对于你只想存储一段时间的东西。当您将其放入缓存中时,您可以指定它到期的时间。
感谢您的快速响应,但是如何实现这一点,我仍然有点失落。只是为了澄清,我可以简单地在我的JavaScript中输入上面的代码,然后用按钮或onRefresh中的onClick激活它,例如?或者还有更多吗? “NAME”参数可以是我选择的任何东西吗? – Carlos
绝对!是的,你可以用任何你想要命名你的对象的名字来代替这个名字。 “NAME”是关键价值。 – Infinity