](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としたいです。
該当のソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>localStorageのサンプル</title>
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
</head>
<body>
<div id="form">
<textarea id="text1" name="japanese" cols="40" rows="5"></textarea>
<!-- <input id="text1" type="text" size="50"> -->
<input id="text2" type="text" size="50">
<input id="text3" type="text" size="50">
</div>
<input type="button" onClick="saveData()" value="データ保存">
<input type="button" onClick="readData()" value="データ読込">
<input type="button" onClick="delData()" value="データ削除">
<p id="exp_Q"></p>
<p id="exp_A"></p>
<p id="exp_I"></p>
<p>単語:</p>
<p id="list_Q">ex</p>
<p id="list_A">ex</p>
<p id="list_I">ex</p>
<button onclick="next()">進む</button>
<button onclick="addlist()">保存</button>
<script>
var obj = {};
var x = 1;
function saveData() {
// $("#text1, #text2, #text3").empty();
var text1 = $("#text1").val();
var text2 = $("#text2").val();
var text3 = $("#text3").val();
obj[x] = {
"english": text1,
"japanese": text2,
"info": text3
};
console.log(obj);
x = x + 1;
localStorage.setItem("data", JSON.stringify(obj));
console.log( localStorage.getItem("data") );
addlist();
}
var k = 0;
// function back() {
// var object = JSON.parse(localStorage.getItem("data"));
// var keys = Object.keys(object);
// $('#list_Q').text(object[keys[k]]['english']);
// $('#list_A').text(object[keys[k]]['japanese']);
// $('#list_I').text(object[keys[k]]['info']);
// k--;
// }
// var k = 0;
function next() {
var object = JSON.parse(localStorage.getItem("data"));
var keys = Object.keys(object);
$('#list_Q').text(object[keys[k]]['english']);
$('#list_A').text(object[keys[k]]['japanese']);
$('#list_I').text(object[keys[k]]['info']);
console.log(object[keys[k]]['english'])
k++;
}
var iMax = 0;
function list(){
var object = JSON.parse(localStorage.getItem("data"));
var keys = Object.keys(object);
var a = "";
for( var i=0, l=keys.length; i<l; i++) {
a += "<tr>\n";
a += "<td>";
a += keys[i];
a += "</td>\n";
for (j = 0; j < Object.keys(object[keys[i]]).length; j++) {
a += "<td>";
a += object[keys[i]][Object.keys(object[keys[i]])[j]];
a += "</td>\n";
}
a += "</tr>\n";
iMax = i;
}
$("#listbox").append(a);
}
var i = 0;
function addlist(){
var object = JSON.parse(localStorage.getItem("data"));
var keys = Object.keys(object);
var a = "";
a += "<tr>\n";
a += "<td>";
// if(!keys.length + 1 == i){
// a = keys.length + keys[i]
// }else{
// a += keys[i];
// };
a += keys[i];
a += "</td>\n";
a += "<td>";
a += object[keys[i]]['english'];
a += "</td>\n";
a += "<td>";
a += object[keys[i]]['japanese'];
a += "</td>\n";
a += "<td>";
a += object[keys[i]]['info'];
a += "</td>\n";
a += "</tr>\n";
$("#listbox").append(a);
i++;
}
function count(){
}
</script>
試したこと
list();内でiMaxで最大数を入れて、addlist()内で1プラスしようとしたり、
登録されている全ての数をkeys.lengthで取得し、1プラスしてみたりしました。
補足情報(言語/FW/ツール等のバージョンなど)
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+4
こういうことでしょうか...と思ったのですが違うようなので修正します。
失礼しました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>localStorageのサンプル</title>
</head>
<body>
<div id="form">
<label>
<input id="text1" type="text" size="50">
</label>
<label>
<input id="text2" type="text" size="50">
</label>
<label>
<input id="text3" type="text" size="50">
</label>
</div>
<input type="button" onClick="saveData()" value="データ保存">
<input type="button" onClick="readData()" value="データ読込">
<input type="button" onClick="delData()" value="データ削除">
<div id="list"></div>
<p id="exp_Q"></p>
<p id="exp_A"></p>
<p id="exp_I"></p>
<hr>
<input type="button" onClick="next()" id="next_button" value="進む">
<input type="button" onClick="back()" id="back_button" value="戻る">
<hr>
<p id="list_Q"></p>
<p id="list_A"></p>
<p id="list_I"></p>
<hr>
<button onclick="addlist()">保存</button>
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script>
var obj = {};
var x = 1;
document.addEventListener("DOMContentLoaded", function () {
var object = JSON.parse(localStorage.getItem("data"));
var keys = Object.keys(object);
if (Object.keys(object).length !== 0) {
$('#list_Q').text(object[keys[0]]['english']);
$('#list_A').text(object[keys[0]]['japanese']);
$('#list_I').text(object[keys[0]]['info']);
}
});
function saveData() {
var text1 = $("#text1").val();
var text2 = $("#text2").val();
var text3 = $("#text3").val();
obj[x] = {
"english": text1,
"japanese": text2,
"info": text3
};
x = x + 1;
localStorage.setItem("data", JSON.stringify(obj));
}
function readData() {
// オブジェクトに戻して取得
$("#exp_Q, #exp_A, #exp_I").empty();
var object = JSON.parse(localStorage.getItem("data"));
for (var i = 0; i < Object.keys(object).length; i += 1) {
$("#exp_Q").append(Object.keys(object)[i] + ": " + object[Object.keys(object)[i]]['english'] + ", ");
$("#exp_A").append(Object.keys(object)[i] + ": " + object[Object.keys(object)[i]]['japanese'] + ", ");
$("#exp_I").append(Object.keys(object)[i] + ": " + object[Object.keys(object)[i]]['info'] + ", ");
}
}
var i = 0;
function back() {
var object = JSON.parse(localStorage.getItem("data"));
var keys = Object.keys(object);
if (i <= 0) {
return false;
} else {
i--;
$('#list_Q').text(object[keys[i]]['english']);
$('#list_A').text(object[keys[i]]['japanese']);
$('#list_I').text(object[keys[i]]['info']);
}
}
function next() {
var object = JSON.parse(localStorage.getItem("data"));
var keys = Object.keys(object);
if (i + 1 >= Object.keys(object).length) {
return false;
} else {
i++;
$('#list_Q').text(object[keys[i]]['english']);
$('#list_A').text(object[keys[i]]['japanese']);
$('#list_I').text(object[keys[i]]['info']);
}
}
</script>
</body>
</html>
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
checkベストアンサー
+2
2点。
var x = 1;
が固定なのでリロード後に変化しない(上書きされる)
ロード時に要素数をx
に代入するか、変動があった場合ストレージに保存してそれをロード時に代入すればと変化すると思う。(後者のほうがお勧め)- そもそも連想配列で保存することはお勧めしない
連想配列は順序については処理系によります。なので登録順が保存されるわけではないため、ソートするなどしないといけません。通常の配列にオブジェクトを入れるのが良いと思います。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.10%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
kei344
2017/02/16 02:26
そもそも localStorage に追加保存されていませんが、何をしたいのか追記していただけませんか?
kei344
2017/02/16 02:34
「保存」の動きが追記されていませんがそれは無視するということですね。console.log( localStorage.getItem("data") ); の値を追記してください。 どういうデータを入れているのかがわかりません。
tai_chi
2017/02/16 02:40
申し訳ありません。ただいま、追記致しました!function list(){}は起動時に読み込まれるようにしています。保存ボタンを押して追加しようとすると、番号が1に戻ってしまいます。
tai_chi
2017/02/16 03:03
console.log( localStorage.getItem("data") ); を追記致しました。申し訳ありません。よろしくお願いいたします。
kei344
2017/02/16 03:24
console.log( localStorage.getItem("data") ); はコード中に入れてくれということではなく、それの出力する値を書いてほしいということです。出力はデベロッパーツールで確認してみてください。http://eng-entrance.com/javascript-display-error また、「obj[x]」が宣言されずに書かれていますが、どこかで定義されているのでしょうか。
tai_chi
2017/02/16 03:36
console.logで確認したところ、1:Object english : "apple" info : "果物" japanese : "りんご" となりました。 申し訳ありません。。var obj = {}; var x = 1;を追記致しました。
kei344
2017/02/16 03:49
console.log( localStorage.getItem("data") ); でその値が返ってくる事は考えられません。console.log(obj);と勘違いされていませんか?
tai_chi
2017/02/16 04:08
何度も申し訳ありません。勘違いしておりました。。以下のように表示されました。よろしくお願いいたします。 {"1":{"english":"a","japanese":"a","info":"a"},"2":{"english":"aa","japanese":"aa","info":"aa"},"3":{"english":"b","japanese":"b","info":"b"}}
tai_chi
2017/02/16 04:37
度々申し訳ありません。キャプチャ画面を添付致しました。リロードした後に追加したものはNo1から始まってしまいます。