クリアデータをStorageに保存する－JavaScript入門（HTML5編）

HOME
JavaScript入門[HTML5編]
クリアデータをStorageに保存する

前のページでは、配列をStorageに保存する方法を見ました。このページではその利用方法を考えます。例えばゲームのクリアデータや、問題の回答履歴を保存すること等に使えるかも知れません。

問題のクリアデータを保存するサンプルスクリプト

以下に計算問題を5問掲載しています。回答して正解すると、「回答済」の文字が表示されます。そのデータをローカルストレージに保存するので、次回ブラウザでこのページを開いた時にその履歴が再現されます。

<body onload="setData()">

<form name="calc">
問題1 14+45+73+23+75=<input type="text" value=""><br>
問題2 46+92+21+54+83=<input type="text" value=""><br>
問題3 25+37+55+17+89=<input type="text" value=""><br>
問題4 66+27+67+25+43=<input type="text" value=""><br>
問題5 87+12+49+56+90=<input type="text" value=""><br>
<input type="button" id="btn" value=" 回答 ">
</form>

<script>
//正解を格納する配列
var answer = new Array("230","296","223","228","294");

//回答済みかを格納する配列。0はまだ、1は回答済み
var q = new Array(0,0,0,0,0);

//ストレージのデータから回答済みか確認して表示させる関数
function setData()
{
  var cdata = localStorage.getItem("clear");

  if ( cdata != null )
  {
    q = JSON.parse(cdata);  //Storageのデータを配列に戻す

    for (var i = 0 ; i < 5 ; i++ )
    {
      if( q[i] == 1 )
      {
        document.calc.elements[i].value = "回答済";
      }
    }
  }
}

//ボタンをクリックすると正解か確認してStorageに記録する
document.getElementById("btn").addEventListener("click",function(){

  for (var i = 0 ; i < 5 ; i++ )
  {
    if ( document.calc.elements[i].value  == answer[i] )
    {
      q[i] = 1;
    }
  }
  localStorage.setItem("clear",JSON.stringify(q));  //配列をStorageに記録

  setData();

},false);
</script>

サンプルスクリプトの解説

では上記のサンプルを詳しく見ていきましょう。

フォーム

<form name="calc">
問題1 14+45+73+23+75=<input type="text" value=""><br>
問題2 46+92+21+54+83=<input type="text" value=""><br>
問題3 25+37+55+17+89=<input type="text" value=""><br>
問題4 66+27+67+25+43=<input type="text" value=""><br>
問題5 87+12+49+56+90=<input type="text" value=""><br>
<input type="button" id="btn" value=" 回答 ">
</form>

最初にフォームを見ておきます。フォーム名は「calc」にしました。計算問題とテキストボックスを５つ並べ、最後にボタンを１つ設置しました。テキストボックスはelements[]でアクセスするので、idもnameも省きました。ボタンは「btn」というid名を付け、後からクリックイベントを追加できるようにしました。

正解と回答結果を入れる配列

var answer = new Array("230","296","223","228","294");

var q = new Array(0,0,0,0,0);

次にスクリプトの中身を見ておきます。最初に２つの配列を作成しました。１つは配列answerで、各問題の答えを順に格納しています。ダブルクォーテーションで括って文字列にしているのは、テキストボックスに入力された数値と比較するためです（テキストボックスの値を取得すると文字列になるから）。

２つ目の配列qには、問題が回答済みかどうかを格納します。trueとfalseでも良かったのですが、今回は「0」未回答、「1」回答済にします。初期値は全て0（未回答）とします。

関数setData()

function setData(){    }

次に関数setData()を作成します。ローカルストレージから回答済みかどうかを記録したデータを読み込み、回答済みならテキストボックスそう表示させます。

var cdata = localStorage.getItem("clear");

if ( cdata != null )
{
  q = JSON.parse(cdata);
}

関数の中を今度は見ていきます。最初にgetItem()を使い、key名「clear」のデータをローカルストレージから読み込みます。読み込んだデータを変数cdataに格納します。

もしkey名「clear」のデータが無ければ、nullが入ります。それで、null以外の時に処理を行なうため、if文でチェックしています。

null以外（つまりkey名「clear」からデータが読み込めた場合）の時、 JSON.parse()でデータを配列に戻し、配列qに代入します。

for (var i = 0 ; i < 5 ; i++ )
{
  if( q[i] == 1 )
  {
    document.calc.elements[i].value = "回答済";
  }
}

続いてfor文で５つ問題の回答履歴をチェックします。繰り返し回数は５回です。配列の最初の項目は０なので、変数iの取る範囲は０～４としています。

if文で配列qの各要素が1かどうか（つまり回答済みか）確認します。 1であれば、その問題の回答欄になっているテキストボックスに「回答済」と表示させます。

ここでif文の評価項目が数字の「1」であることに注目できます。もしtoString()で配列を格納する方法では、「1」は文字列になりますが、 JSONでは数値のままで元に戻せます。

ボタンのクリックイベント

document.getElementById("btn").addEventListener("click",function(){

},false);

今度はボタンを押した時の処理について見ていきます。最初にaddEventListener()でid名「btn」のボタンにクリックイベントを追加しています。

for (var i = 0 ; i < 5 ; i++ )
{
  if ( document.calc.elements[i].value  == answer[i] )
  {
    q[i] = 1;
  }
}

次にクリックイベントの中身を見ていきます。最初にfor文を使って、５つのテキストボックスの入力値を繰り返し取得できるようにしています。

for文の最初に、if文でテキストボックスの入力値と、正解を格納した配列の各要素とを比較しています。もし一致する、つまり正解なら、配列qのそれに対応する要素の値を1に（回答済に）しています。

localStorage.setItem("clear",JSON.stringify(q));

setData();

５つのテキストボックスの比較が終わったら、配列qをローカルストレージに保存します。 key名は「clear」にしています。配列qを保存する時に、JSON形式に変換しています。

最後に関数setData()を読み出して、テキストボックスの書き換えを行なっています。

次回ページを訪れた時の処理

<body onload="setData()">

さて、次回このページを訪れた時に、回答履歴を復元する処理を最後に記述しておきましょう。 bodyタグのonloadイベントで関数setData()を読み出すだけでOKです。

ローカルストレージのデータの消去

このページを学び終えられた方は、もう配列qを保存しておく必要もないでしょう。以下のボタンを押してローカルストレージから不要なデータを削除なさって下さい。

<form>
<input type="button" id="clr" value=" データ消去 ">
</form>
<script>
document.getElementById("clr").addEventListener("click",function(){
  localStorage.removeItem("clear");
},false);
</script>

と、まあこのようにしてクリアデータや閲覧履歴などを配列としてストレージに記録することができます。当サイトのパズルのページでも、攻略した問題が分かるようにしたら良いかな…と思っています。

前へ INDEXへ