](263be59f33f5c30cf18714ece5f955ac.png)###前提・実現したいこと
ここに質問したいことを詳細に書いてください
以下のようにJSON形式で保存した連想配列を追加登録する際、
今まで登録したものの数に1をプラスして登録したいです。
(1)画面をロードした時に今まで登録した分を一覧表示。
function list()[]内に記載。
(2)保存ボタンをクリックする度に、
今まで登録した分に加えて、オブジェクトを追加。
function addlist()[]内に記載。
obj[x] = { "english": text1, "japanese": text2, "info": text3 };
お言葉いただきたいです。どうぞよろしくお願いいたします。
###発生している問題・エラーメッセージ
新しいものを追加しようとすると、番号が1に戻ってしまいます。 そこから保存ボタンを押す度に2、3、4と増えていきますが、 本当は画面をリロードして新たに登録する時、 5、6、7としたいです。
###該当のソースコード
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で取得し、1プラスしてみたりしました。
###補足情報(言語/FW/ツール等のバージョンなど)
回答2件
あなたの回答
tips
プレビュー