質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Storage+

Storage+は、IT業界団体CompTIA認定の資格で、ストレージに関する知識を証明します。ストレージの設計・構築~運用・管理までの知識を評価し、接続時のトラブルシューティングや基礎的なストレージ・システム管理のスキルを取得している証明になります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

2回答

527閲覧

LocalStorageを用いた入力データの保存と再表示機能について

gumamori

総合スコア14

Storage+

Storage+は、IT業界団体CompTIA認定の資格で、ストレージに関する知識を証明します。ストレージの設計・構築~運用・管理までの知識を評価し、接続時のトラブルシューティングや基礎的なストレージ・システム管理のスキルを取得している証明になります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

1クリップ

投稿2017/10/12 09:51

編集2017/10/16 11:15

現在、得点集計用のコードを作成しています。
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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m0a

2017/10/12 10:01

SaveKeyValue/ LoadKeyValueの実装が見当たりません。全てのコードを載せて下さい
yambejp

2017/10/12 11:44

なにをどう入力して、どう保存して、どう表示したいのでしょうか?
guest

回答2

0

単純に下記のコードでどうですか?
提示のhtmlに同じIDが複数存在しています。
IDを別々にして、カンマ区切りで保存するか、オブジェクト形式で保存するか、
検討してみて下さい。

下記ではtry-catchの例外を入れていますが、当然無くても動作します。

javascript

1<script> 2//_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_ 3// SaveKeyValue() 4// ローカルストレージにアイテムを書き込み 5//_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_ 6function SaveKeyValue() { 7 var key = document.getElementById('Text_key').value; 8 var val = document.getElementById('Text_value').value; 9 10 try { 11 // ローカルストレージに書き込み 12 localStorage.setItem(key, val); 13 } catch(e) { 14 alert(e+'\n'+'ローカルストレージへの書き込みが出来ませんでした。\n' + '(key:' + key + ',' + val + ')'); 15 }; 16}; 17 18//_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_ 19// LoadKeyValue() 20// ローカルストレージから読み込み 21//_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_ 22function LoadKeyValue() { 23 var val = ''; 24 var key = document.getElementById('Text_key').value; 25 26 try { 27 // ローカルストレージから読み込み 28 val = localStorage.getItem(key); 29 } catch(e) { 30 val = ''; 31 alert(e+'\n'+'ローカルストレージからの読み込みが出来ませんでした。\n' + '(key:' + key + ')'); 32 }; 33 34 if(val==null){ 35 val = ''; 36 }; 37 38 document.getElementById('Text_value').value = val; 39}; 40 41</script>

投稿2017/10/12 23:52

yatama

総合スコア66

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gumamori

2017/10/16 11:11

返信が遅くなり申し訳ありません。ご回答ありがとうございました。 コードをお借りしてみましたが、解剖学はデータが保存表示されましたが、情報工学のほうは表示されませんでした。idが被っていましたので、idをそれぞれ変更(kaibo,zyoho)してみましたが、どちらも表示されません…。一つのkeyから2つ以上のデータを表示させるには、どのようなコードを書けばいいのでしょうか…? ご教授願います。
guest

0

ベストアンサー

始めの回答にも記載しました通り、カンマ区切りで保存してsplitで分解する方法は
下記のとおりです。
オブジェクト形式で保存する方法もあります。
もしくは、入力されたキーの後ろに'kaibo'や'zyoho'と付加して別々のキーに保存し、
別々に読み込むのも方法としてはあります。

javascript

1<script> 2 3ons.ready(function() { 4 console.log("Onsen UI is ready!"); 5}); 6 7//_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_ 8// SaveKeyValue() 9// ローカルストレージにアイテムを書き込み 10//_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_ 11function SaveKeyValue() { 12 var key = document.getElementById('Text_key').value; 13 var val = document.getElementById('kaibo').value + ',' + document.getElementById('zyoho').value; 14 15 try { 16 // ローカルストレージに書き込み 17 localStorage.setItem(key, val); 18 } catch(e) { 19 alert(e+'\n'+'ローカルストレージへの書き込みが出来ませんでした。\n' + '(key:' + key + ',' + val + ')'); 20 }; 21}; 22 23//_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_ 24// LoadKeyValue() 25// ローカルストレージから読み込み 26//_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_ 27function LoadKeyValue() { 28 var val = ''; 29 var key = document.getElementById('Text_key').value; 30 31 try { 32 // ローカルストレージから読み込み 33 val = localStorage.getItem(key); 34 } catch(e) { 35 val = ','; 36 alert(e+'\n'+'ローカルストレージからの読み込みが出来ませんでした。\n' + '(key:' + key + ')'); 37 }; 38 39 if(val==null){ 40 val = ','; 41 }; 42 43 var ret = val.split(','); 44 document.getElementById('kaibo').value = ret[0]; 45 document.getElementById('zyoho').value = ret[1]; 46}; 47 48</script> 49

投稿2017/10/17 01:15

yatama

総合スコア66

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gumamori

2017/10/17 08:28

ご回答ありがとうございます。無事、実装できました!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問