goodbabies回答ポイント 200pt

JavascriptでJSONデータの追加が出来ない

localStrage×JSONでクリックで内容保存していくプログラム作成中ですが、クリック→更新→過去データを消して上書き状態に。過去のデータに対して『追加』が出来ないんです。

以下スクリプト

$(function(){
//空のデータ代入を毎回しているから？
var object = {};
object.modified = "2012/05/23 Wed";
object.items = new Array();
var data = {};

//JSONデータを追加
var getStrage = function () {
data.name = "<_NAME_>";//PHPから取得した変数

object.items.push(data);//追加
nativeJSON = JSON.stringify(object);
// JSON　localStorage保存
localStorage.setItem('Storage', nativeJSON);
}
//クリックでデータ追加
$("#submit").click(getStrage);
});

//以下別ページ　localStrageの出力
$(function(){
$("#main_box").show(function(){
$("#main_box").show(function(){
var nativeJSON = localStorage.getItem('Storage');
// JSONデータ→JavaScriptオブジェクトに変換
var object = JSON.parse(nativeJSON);
// オブジェクトからデータ取得
var html = "modified:" + object.modified + "<BR>";
for(var idx=0; idx < object.items.length; idx++) {
html = html + "■items" + idx + "<BR>";
html = html + "title:" + object.items[idx].name + "<BR>";
}
//ストレージ(JSON)を出力
$("#main_box").append(html);
});
});

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ログインして回答する

ベストアンサー

Cherenkov2012/05/24 18:50:05
満足200pt

前回のlocalStorageを読み込んでいないだけなのでは。

<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
	var object = localStorage.getItem('Storage') ? JSON.parse(localStorage.getItem('Storage')) : { items: []};
	object.modified = "2012/05/23 Wed";

	//JSONデータを追加
	var setStorage = function () {
			var data = {};
			data.name = "<_NAME_>"; //PHPから取得した変数
			object.items.push(data); //追加
			var nativeJSON = JSON.stringify(object);
			// JSON　localStorage保存
			localStorage.setItem('Storage', nativeJSON);
		}
	//クリックでデータ追加
	$("#submit").click(setStorage);

	$("#show_json").click(function() {
		var json = localStorage.getItem('Storage');
		console.log(json);
		$('#output').text(json);
		});

	$("#clear").click(function() {
		localStorage.removeItem('Storage');
		object = { items: []};
		$('#output').text('');
		});
});
</script>
</head>
<body>
<input id="submit" type="button" value="save" />
<input id="show_json" type="button" value="show" />
<input id="clear" type="button" value="clear" />
<div id="output"></div>
</body>
</html>

スター

1件のコメントを見る
goodbabies 2012/05/25 10:05:01

全くおっしゃるとおりでした！
var object = localStorage.getItem('Storage') ? JSON.parse(localStorage.getItem('Storage')) : { items: []};
object.modified = "2012/05/23 Wed";
この部分の追加だけで動きました！ありがとうございます！

スター

JavascriptでJSONデータの追加が出来ない

ベストアンサー

Cherenkov2012/05/24 18:50:05
満足200pt

goodbabies 2012/05/25 10:05:01

その他の回答

この質問へのコメント

この質問への反応（ブックマークコメント）

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

JavascriptでJSONデータの追加が出来ない

ベストアンサー

Cherenkov2012/05/24 18:50:05 満足200pt

goodbabies 2012/05/25 10:05:01

その他の回答

この質問へのコメント

この質問への反応（ブックマークコメント）

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

Cherenkov2012/05/24 18:50:05
満足200pt