2

サーバーから XML データを取得し、JavaScript でデータを解析し、[canvas] タグを使用してページ上にパズルを作成するクロスワード パズル Web アプリを作成しています。ユーザーが手がかりを選択して正しい答えを入力すると、クロスワード パズルの対応するマスに文字が配置されます。

対応する四角に文字を配置するコードのスニペットを次に示します。

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 Web ストレージを使用して) 保存して、ユーザーがオフラインでプレイできるようにし、ブラウザーの更新時に進行状況が失われないようにするにはどうすればよいかということです。

私は HTML Web Storage API にあまり詳しくありませんが、これは Web アプリケーションにとって価値のあるツールだと聞いています。あなたのアドバイスは大歓迎です。

ありがとう、カルロス

4

2 に答える 2

1

次の JavaScript を使用して、JSON オブジェクトまたはプログラムの状態を html5 ローカル ストレージ内に保存できます。

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

その後、使用して後で取得できます

var savedGame = localStorage["NAME"];

ただし、1 つの警告として、IE を除くすべてのブラウザーで動作します。IE はローカル ストレージとして何か他のものを使用するためです。

于 2011-08-29T03:19:17.430 に答える
0

アプリの残りの部分が HTML5 に依存している場合を除き、 Lawnchairのようなライブラリを使用してlocalStorage をラップすることを検討することもできますが、ストレージ メカニズムを備えているが localStorage を備えていない他のブラウザーに代替実装を提供することもできます。Lawnchair を使用する場合は、 lccache とペアにすることをお勧めします。

Lawnchair をスキップして localStorage だけを使用することにした場合は、それをlscacheとペアにすることをお勧めします。lscache と lccache はどちらも、API を次のように簡略化するラッパーです。

値 = l(c/s)cache.get("キー");

l(c/s)cache.set("キー", 値);

l(c/s)cache.remove("キー");

これは、保存したり、元に戻したりするのと同じくらい簡単です。さらに、しばらくの間だけ保存したいもののために。セットでキャッシュに入れると、有効期限が切れるまでの時間を指定できます。

于 2011-08-29T04:11:41.590 に答える