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);
});
});

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/05/24 17:40:43
  • 終了:2012/05/25 10:05:10

ベストアンサー

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922012/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>
id:goodbabies

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

2012/05/25 10:05:01

コメントはまだありません

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

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません