Q&A
そもそも localStorage に追加保存されていませんが、何をしたいのか追記していただけませんか？
](263be59f33f5c30cf18714ece5f955ac.png)###前提・実現したいこと
ここに質問したいことを詳細に書いてください
以下のようにJSON形式で保存した連想配列を追加登録する際、
今まで登録したものの数に１をプラスして登録したいです。
（１）画面をロードした時に今まで登録した分を一覧表示。
function list()[]内に記載。
（２）保存ボタンをクリックする度に、
今まで登録した分に加えて、オブジェクトを追加。
function addlist()[]内に記載。
obj[x] = { "english": text1, "japanese": text2, "info": text3 };
お言葉いただきたいです。どうぞよろしくお願いいたします。
###発生している問題・エラーメッセージ
新しいものを追加しようとすると、番号が1に戻ってしまいます。 そこから保存ボタンを押す度に２、３、４と増えていきますが、 本当は画面をリロードして新たに登録する時、 ５、６、７としたいです。
###該当のソースコード
html
1 2<!DOCTYPE html> 3<html lang="ja"> 4<head> 5 <meta charset="utf-8"> 6 <title>localStorageのサンプル</title> 7 <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script> 8</head> 9<body> 10<div id="form"> 11<textarea id="text1" name="japanese" cols="40" rows="5"></textarea> 12<!-- <input id="text1" type="text" size="50"> --> 13 <input id="text2" type="text" size="50"> 14 <input id="text3" type="text" size="50"> 15</div> 16 17 18<input type="button" onClick="saveData()" value="データ保存"> 19<input type="button" onClick="readData()" value="データ読込"> 20<input type="button" onClick="delData()" value="データ削除"> 21 22 23 <p id="exp_Q"></p> 24 <p id="exp_A"></p> 25 <p id="exp_I"></p> 26 27 <p>単語：</p> 28 <p id="list_Q">ex</p> 29 <p id="list_A">ex</p> 30 <p id="list_I">ex</p> 31 <button onclick="next()">進む</button> 32 <button onclick="addlist()">保存</button> 33 34<script> 35var obj = {}; 36var x = 1; 37function saveData() { 38 // $("#text1, #text2, #text3").empty(); 39 var text1 = $("#text1").val(); 40 var text2 = $("#text2").val(); 41 var text3 = $("#text3").val(); 42 43 44 obj[x] = { 45 "english": text1, 46 "japanese": text2, 47 "info": text3 48 }; 49 50 console.log(obj); 51 52 x = x + 1; 53 localStorage.setItem("data", JSON.stringify(obj)); 54 console.log( localStorage.getItem("data") ); 55 addlist(); 56} 57 58 59 60 61 62var k = 0; 63// function back() { 64// var object = JSON.parse(localStorage.getItem("data")); 65// var keys = Object.keys(object); 66// $('#list_Q').text(object[keys[k]]['english']); 67// $('#list_A').text(object[keys[k]]['japanese']); 68// $('#list_I').text(object[keys[k]]['info']); 69// k--; 70// } 71 72 // var k = 0; 73function next() { 74 var object = JSON.parse(localStorage.getItem("data")); 75 var keys = Object.keys(object); 76 $('#list_Q').text(object[keys[k]]['english']); 77 $('#list_A').text(object[keys[k]]['japanese']); 78 $('#list_I').text(object[keys[k]]['info']); 79 console.log(object[keys[k]]['english']) 80 k++; 81} 82 83var iMax = 0; 84 function list(){ 85 var object = JSON.parse(localStorage.getItem("data")); 86 var keys = Object.keys(object); 87 var a = ""; 88 for( var i=0, l=keys.length; i<l; i++) { 89 a += "<tr>\n"; 90 a += "<td>"; 91 a += keys[i]; 92 a += "</td>\n"; 93 94 for (j = 0; j < Object.keys(object[keys[i]]).length; j++) { 95 a += "<td>"; 96 a += object[keys[i]][Object.keys(object[keys[i]])[j]]; 97 a += "</td>\n"; 98 } 99 a += "</tr>\n"; 100 iMax = i; 101 } 102 $("#listbox").append(a); 103 } 104 105 var i = 0; 106 function addlist(){ 107 var object = JSON.parse(localStorage.getItem("data")); 108 var keys = Object.keys(object); 109 var a = ""; 110 a += "<tr>\n"; 111 a += "<td>"; 112 // if(!keys.length + 1 == i){ 113 // a = keys.length + keys[i] 114 // }else{ 115 // a += keys[i]; 116 // }; 117 a += keys[i]; 118 a += "</td>\n"; 119 a += "<td>"; 120 a += object[keys[i]]['english']; 121 a += "</td>\n"; 122 a += "<td>"; 123 a += object[keys[i]]['japanese']; 124 a += "</td>\n"; 125 a += "<td>"; 126 a += object[keys[i]]['info']; 127 a += "</td>\n"; 128 a += "</tr>\n"; 129 $("#listbox").append(a); 130 i++; 131 132 } 133 134 function count(){ 135 136 } 137 138</script>
###試したこと
list();内でiMaxで最大数を入れて、addlist()内で1プラスしようとしたり、
登録されている全ての数をkeys.lengthで取得し、１プラスしてみたりしました。
###補足情報(言語/FW/ツール等のバージョンなど)
「保存」の動きが追記されていませんがそれは無視するということですね。console.log( localStorage.getItem("data") ); の値を追記してください。 どういうデータを入れているのかがわかりません。
申し訳ありません。ただいま、追記致しました！function list(){}は起動時に読み込まれるようにしています。保存ボタンを押して追加しようとすると、番号が１に戻ってしまいます。
console.log( localStorage.getItem("data") ); を追記致しました。申し訳ありません。よろしくお願いいたします。
console.log( localStorage.getItem("data") ); はコード中に入れてくれということではなく、それの出力する値を書いてほしいということです。出力はデベロッパーツールで確認してみてください。http://eng-entrance.com/javascript-display-error また、「obj[x]」が宣言されずに書かれていますが、どこかで定義されているのでしょうか。
console.logで確認したところ、１：Object english : "apple" info : "果物" japanese : "りんご" となりました。 申し訳ありません。。var obj = {}; var x = 1;を追記致しました。
console.log( localStorage.getItem("data") ); でその値が返ってくる事は考えられません。console.log(obj);と勘違いされていませんか？
何度も申し訳ありません。勘違いしておりました。。以下のように表示されました。よろしくお願いいたします。 {"1":{"english":"a","japanese":"a","info":"a"},"2":{"english":"aa","japanese":"aa","info":"aa"},"3":{"english":"b","japanese":"b","info":"b"}}
度々申し訳ありません。キャプチャ画面を添付致しました。リロードした後に追加したものはNo1から始まってしまいます。
回答2件
0
こういうことでしょうか...と思ったのですが違うようなので修正します。
失礼しました。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>localStorageのサンプル</title> 6</head> 7<body> 8<div id="form"> 9 <label> 10 <input id="text1" type="text" size="50"> 11 </label> 12 <label> 13 <input id="text2" type="text" size="50"> 14 </label> 15 <label> 16 <input id="text3" type="text" size="50"> 17 </label> 18</div> 19 20 21<input type="button" onClick="saveData()" value="データ保存"> 22<input type="button" onClick="readData()" value="データ読込"> 23<input type="button" onClick="delData()" value="データ削除"> 24<div id="list"></div> 25<p id="exp_Q"></p> 26<p id="exp_A"></p> 27<p id="exp_I"></p> 28<hr> 29<input type="button" onClick="next()" id="next_button" value="進む"> 30<input type="button" onClick="back()" id="back_button" value="戻る"> 31<hr> 32<p id="list_Q"></p> 33<p id="list_A"></p> 34<p id="list_I"></p> 35<hr> 36<button onclick="addlist()">保存</button> 37 38<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script> 39<script> 40 var obj = {}; 41 var x = 1; 42 43 44 document.addEventListener("DOMContentLoaded", function () { 45 var object = JSON.parse(localStorage.getItem("data")); 46 var keys = Object.keys(object); 47 if (Object.keys(object).length !== 0) { 48 $('#list_Q').text(object[keys[0]]['english']); 49 $('#list_A').text(object[keys[0]]['japanese']); 50 $('#list_I').text(object[keys[0]]['info']); 51 } 52 }); 53 54 function saveData() { 55 var text1 = $("#text1").val(); 56 var text2 = $("#text2").val(); 57 var text3 = $("#text3").val(); 58 59 obj[x] = { 60 "english": text1, 61 "japanese": text2, 62 "info": text3 63 }; 64 x = x + 1; 65 localStorage.setItem("data", JSON.stringify(obj)); 66 } 67 68 function readData() { 69 // オブジェクトに戻して取得 70 $("#exp_Q, #exp_A, #exp_I").empty(); 71 var object = JSON.parse(localStorage.getItem("data")); 72 for (var i = 0; i < Object.keys(object).length; i += 1) { 73 $("#exp_Q").append(Object.keys(object)[i] + ": " + object[Object.keys(object)[i]]['english'] + ", "); 74 $("#exp_A").append(Object.keys(object)[i] + ": " + object[Object.keys(object)[i]]['japanese'] + ", "); 75 $("#exp_I").append(Object.keys(object)[i] + ": " + object[Object.keys(object)[i]]['info'] + ", "); 76 } 77 } 78 79 var i = 0; 80 function back() { 81 var object = JSON.parse(localStorage.getItem("data")); 82 var keys = Object.keys(object); 83 if (i <= 0) { 84 return false; 85 } else { 86 i--; 87 $('#list_Q').text(object[keys[i]]['english']); 88 $('#list_A').text(object[keys[i]]['japanese']); 89 $('#list_I').text(object[keys[i]]['info']); 90 } 91 } 92 93 function next() { 94 var object = JSON.parse(localStorage.getItem("data")); 95 var keys = Object.keys(object); 96 if (i + 1 >= Object.keys(object).length) { 97 return false; 98 } else { 99 i++; 100 $('#list_Q').text(object[keys[i]]['english']); 101 $('#list_A').text(object[keys[i]]['japanese']); 102 $('#list_I').text(object[keys[i]]['info']); 103 } 104 } 105</script> 106</body> 107</html>
投稿2017/02/15 17:51
編集2017/02/15 18:51
総合スコア14731
お言葉をくださりありがとうございます。
以前登録していた分の表示はできますが、リロードしてから追加保存すると、
object自体の数字が１に戻ってしまうのです。。
1: apple りんご 果物 2: orange オレンジ 果物 ここまで登録してリロードしたとして、
この後に追加保存すると数字が
３： ４； ではなく、
１： ２： に戻ってしまうのです。。
申し訳ありません。説明がわかりにくく。。
backとnextのfunctionのコードが動かなかったです。。
0
ベストアンサー
2点。
0. var x = 1; が固定なのでリロード後に変化しない（上書きされる）
ロード時に要素数を x に代入するか、変動があった場合ストレージに保存してそれをロード時に代入すればと変化すると思う。（後者のほうがお勧め）
0. そもそも連想配列で保存することはお勧めしない
連想配列は順序については処理系によります。なので登録順が保存されるわけではないため、ソートするなどしないといけません。通常の配列にオブジェクトを入れるのが良いと思います。
投稿2017/02/25 05:13
総合スコア69625
ご回答をくださりありがとうございます。
お返事が遅くなり申し訳ございません。
結果、なんとか番号を登録順にすることができました。
function saveData() {
var obj = localStorage.getItem("data");
console.log(obj);
var keyNum = 1;
if(obj != null) {
obj = JSON.parse(obj);
var keys = Object.keys(obj);
keyNum = keys.length + 1;
} else {
obj = {};
}
ただ、通常の配列で行うやり方がわからなかったです。。
勉強を続けていきます！
お言葉をくださりありがとうございました！
あなたの回答
tips
プレビュー
