javascriptでWebstorageを使ってクイズデータを保存するやり方に挑戦しています。保存したいデータは、日付、氏名、ユニット名、点数、それとプログラムを実行した回数です。(1回めの得点、2回めの得点、、、というふうにデータを保存したい)その日に何回かスクリプトを繰り返した場合、回数ごとの点数を保存しテーブルに出力、最終的には、JSONにしてd3.jsを使ってグラフにしたいと考えています。そこで、得られたデータを saveArray という配列に入れました。しかしこれだと毎回同じkeyでデータが上書きされてしまいます。これを上書きしないで回数ごとにデータを蓄積するようにしたいのですが、そのやり方がわかりません。配列にもう1つ配列を足す?感じでsaveArray[回数][データ]のようにする方法がいいのでしょうか?

例)saveArray=[回数、日付、氏名、ユニット名、点数]
これを使って必要なデータを抽出して、テーブルを出力したい
例)    1回目得点 2回目得点
ユニット名  56点    50点
データはどのような形で配列にいれたらいいのか、是非アドバイス頂ければ幸いです。

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2015/11/05 12:25:03
id:kajironpu

スクリプトです。

//<!ここから下は、データ保存のスクリプト!>********************

function myGo(){
 myselect = document.myForm.myMenu.selectedIndex;
     user = document.myForm.myMenu.options[myselect].value;
// 現在日時情報を取得
objDate = new Date();
y = objDate.getFullYear();
m = objDate.getMonth()+1;
d = objDate.getDate();
date=y+"/"+m+"/"+d
}


//削除ボタンの処理
document.getElementById("erase").addEventListener("click",function(){
  alert("OK");
    sessionStorage.clear();
},false);


//保存ボタンをクリックした時の処理
document.getElementById("save").addEventListener("click",function(){
 savecount++ //何回目のデータか回数を記録
  sessionStorage.setItem( "氏名" , user );   //Storageに書き込み
 sessionStorage.setItem( "ユニット名" , title );  
 sessionStorage.setItem( "点数" , 100-calc );
  sessionStorage.setItem( "日付" , date );
  sessionStorage.setItem( "回数" , savecount );
  },false);


//読込ボタンをクリックした時の処理
document.getElementById("load").addEventListener("click",function(){
   var saveArray =[];
  saveArray[0] = sessionStorage.getItem("回数"); 
   saveArray[1] = sessionStorage.getItem("日付"); 
   saveArray[2] = sessionStorage.getItem("氏名"); 
   saveArray[3] = sessionStorage.getItem("ユニット名"); 
   saveArray[4] = sessionStorage.getItem("点数");  
   
},false);
//********************************************************************

回答1件)

id:Lhankor_Mhy No.1

回答回数814ベストアンサー獲得回数232

JSON.stringify() - JavaScript | MDN
↑のように配列をJSON文字列にして保存すればいいと思います。
二次配列にして全部を毎回出し入れするか、一次配列でグラフを書くときにキーを全部なめるか、というのは実装次第かと。

他7件のコメントを見る
id:kajironpu

ありがとうございます。おかげさまでうまく動作しました。さらに絞り込んだ配列の
3番目[3]の値だけを取り出すにはどうしたらいいのでしょうか?
もう一度、filterをかけるのでしょうか?

2015/11/05 10:13:09
id:kajironpu

ありがとうございました。質問が締め切り済となってしまいました。
申し訳ありません。いろいろ教えて頂き本当に感謝しております。

2015/11/05 14:33:24

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません