人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: goodbabies
●カテゴリ:コンピュータ ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Cherenkov
●200ポイント ベストアンサー

前回の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>

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

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ