使用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頁面上保存用戶輸入

回答

相關問題