人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: kajironpu
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

質問者から

スクリプトです。

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

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 ● Lhankor_Mhy

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


kajironpuさんのコメント
ありがとうございます。 sessionStorage.setItem でデータを保存する際は、前の配列データに上書きではなく、どんどん増えていくデータを加算していきたいので(差分のイメージ) その場合のやり方は二次配列を使うのがオーソドックスでしょうか? もし、これを最初からJSONのように saveArray ={[title:****,score:****,date:****,savecount:***]} このようにしてしまうと、プログラムを繰り返した回数で得られたデータをどんどんJSONのデータに追加していくことはできるでしょうか。もし、できないとすると、やはり二次配列でいくのがいいのですね。

Lhankor_Mhyさんのコメント
たとえば、 sessionStorage.setItem( "20151104" , JSON.stringify(saveArray) ); のようにデータごとにキーを変えていけば、1次配列を入れるだけで済みますね。 で,、取り出すときに、sessionStorageをループでまわして全部とりだす必要があるかと思います。

kajironpuさんのコメント
ありがとうございます。その手があったんですね。 日付を分か秒まで含めて保存ファイル名にすれば、ファイル名が必ず異なるので 上書きしなくてすみますね。 取り出す時は、FORでループで全部のデータを新たに、別の配列に入れればいいのですね。 ありがとうございました。

kajironpuさんのコメント
何度もすみません。得られたデータを1次配列にいれたのですが、1次配列の場合、そこから データを取り出すやり方がわかりません。 例えば、 >|| savedata =[date1, user, title, 100-calc] //データを配列に入れる localStorage.setItem(date2 , JSON.stringify(saveArray) );//Storageに書き込み ||< このような形になっています。 そして、ここから >|| // localStorage.key(i)でi番目のデータのkeyが取れる。 for (var i=0; i<localStorage.length; i++){ var dataArray=[]; var k = localStorage.key(i); dataArray[i] =localStorage.getItem(k); //順番に配列にいれていく } ||< このようにして、データを取り出して、1次配列にいれたのですが、 この配列から,user="A"の100-calcのデータだけを取り出したりするにはどうしたらいいのでしょうか? 2次配列ではないので、dataArray[*][*]が使えない場合のやり方はありますでしょうか?

Lhankor_Mhyさんのコメント
>|javascript| var dataArray=[]; for (var i=0; i<localStorage.length; i++){ var k = localStorage.key(i); dataArray[i] =localStorage.getItem(JSON.parse(k)); } ||< とすれば、dataArray[][]という形でアクセスできます。 その後に、こんな感じに書けばuser="A"の100-calcのデータだけになると思います。 >|javascript| dataArray.filter(function(e){ return (e[1]=="A") ? e[3] : false ; } ||<

kajironpuさんのコメント
ありがとうございます。 >|| dataArray[i] =localStorage.getItem(JSON.parse(k)); ||< ↑の部分がうまく動かず、何とか調べて下のように変えてみて動作したのですが これで間違っていないでしょうか? >|| dataArray[i] =JSON.parse(localStorage.getItem(k)); ||< あと、データ抜き出しのところがうまくいきません。 >|| dataArray.filter(function(e){ return (e[1]=="A") ? e[3] : false ; } ||< ここ部分の e[3]の前は半角の? なのでしょうか?

a-kuma3さんのコメント
filter メソッドの、最後の閉じる括弧が抜けている。 >|| dataArray.filter(function(e){ return (e[1]=="A") ? e[3] : false ; }); // ↑これ ||< というか、filter メソッドの callback は true / false を返すようにしないと、ちょっと気持ち悪い。 >|| var filteredDataArray = dataArray.filter(function(e){ return e[1]=="A"; }); ||<

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

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

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ