現在、得点集計用のコードを作成しています。
LocalStorageを用いた入力データの保存と再表示機能を付けたいと考えています。
具体的には、keyを採点回数の数字(1回目、2回目…)、valueを各単元の得点(数字)とすることで、得点の記録---ができるのではと考えています。以下にhtmlを記載します。LocalStorageで複数のデータを保存する方法に関するサイトを多く読みましたが、いざ、自分のコードになると上手く行きません…。
一つのkeyから2つ以上の値を保存、表示させるにはJSON.stiringfyやJSON.parseを用いることは分かりました。ですがその書く場所やコードの書き方が理解できていないのが現状です。
ご教授をお願いします。
utf
1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 6 <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 7 <script src="components/loader.js"></script> 8 <script src="lib/onsenui/js/onsenui.min.js"></script> 9 <script src="lib/onsenui/js/main.js"></script> 10 <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 11 12 13 14 <link rel="stylesheet" href="components/loader.css"> 15 <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> 16 <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> 17 <link rel="stylesheet" href="css/style.css"> 18 19</head> 20<body> 21<form name="form1"> 22 <table> 23 <caption>採点結果</caption> 24 <tr style="background:#ccccff"> 25 <th>単元</th> 26 <th>結果入力</th> 27 </tr> 28<tr> 29 <td>採点回数</td> 30 <td><input id="Text_key" type="text" >回目(key)</td> 31 </tr> 32<tr> 33 <td>解剖学</td> 34 <td><input id="kaibo" type="text">%(value)</td> 35 </tr> 36<tr> 37 <td>情報工学</td> 38 <td><input id="zyoho" type="text" >%(value)</td> 39 </tr> 40 41</table> 42<input type="button" value="保存" onclick="SaveKeyValue()"> 43<input type="button" value="表示" onclick="LoadKeyValue()"> 44</form> 45</body> 46</html>
回答2件
あなたの回答
tips
プレビュー