jquery htmlのcookie保存・表示

解決済

質問者：eeiina
質問日時：2012/10/29 17:54
回答数：2件

まず、やろうとしていることはボタンをクリックし、その中身と同じデータを持つものを
xmlから読み込み表示します。

次にそこから他のページへ移動して、戻ってきたときに最後に表示していた内容を
そのまま表示させたいのです。
crome、ieにて動作確認をさせたいです。

現状のソースです、
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>無題ドキュメント</title>
<script language="JavaScript" type="text/javascript" src="../jq/jquery-1.7.2.min.js"></script>
<script language="JavaScript" type="text/javascript" src="../jq/jquery.cookie.js"></script>
<script type="text/javascript">
$(function(){
if($.cookie("name")){
$("#newbox").html($.cookie("name"));
}

$('#buttons button').click(function(){
var val = $(this).text();

$.ajax({
url:"index.xml",
type:"get",
dataType:"xml",
timeout:1000,
cache:false,
error:function(){
alert("error");
},
success:function(xml){

var listdata="";
$(xml).find("list").each(function(){
var name=$(this).find("name").text();
//
var imgs=$(this).find("imgs").text();
//
var price=$(this).find("price").text();
//
$(this).children().each(function(){
if($(this).text()==val){

listdata+='<ul><li>'+name+'</li><li><img src="'+imgs+'" /></li><li>' +price+ '</li></ul>';}})
});

$("#newbox").html(listdata);
$.cookie("name",$("#newbox").html());

}
});

})
});
</script>
</head>
<body>

<div id="buttons">
<button>600</button><button>700</button><button>800</button><button>900</button>
</div>

<div id="newbox"></div>

</body>

--xml--------
<list>
<name>いちご</name>
<imgs>001.jpg</imgs>
<price>600</price>
</list>
<list>
<name>ぶどう</name>
<imgs>002.jpg</imgs>
<price>700</price>
</list>
<list>
<name>スイカ</name>
<imgs>003.jpg</imgs>
<price>800</price>
</list>
<list>
<name>メロン</name>
<imgs>004.jpg</imgs>
<price>900</price>
</list>
<list>
<name>りんご</name>
<imgs>005.jpg</imgs>
<price>600</price>
</list>
　　　　・・・続く
--------------
この状態だと、内容が少ない場合は表示されるのですが、内容が多くなると表示されなくなります。

基本的なことが間違っているのか、cookieの処理がおかしいのか
理由がわからず困っています。

どうかご教授お願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

No.1ベストアンサー

回答者： idaroi
回答日時：2012/10/29 23:04

私は、を使ったことはないので、その部分についてのコメントはできませんが、

cookieには、最大4KBという、サイズの制限があります。
元々cookieは、それほど大きなデータを保存するためのものではないです。

この例の場合ですと、変数valに相当する値をcookieに保存しておき、ページが最表示された場合には再度XMLから読み直す方法にするのが通常の作り方かと思います。

取得するXMLの値がその時によって異なり、ページには初回表示時のデータを表示したい場合は、cookieとしての合計サイズが4KBを超える可能性のある場合はサーバ側に保存するか、HTML5依存になりますがWeb Storageを使うなどの方法になるかと思います。

参照URLに、Web Storageの解説ページ例を入れておきます。
上にも書いたように、この方法はHTML5のWeb Storageをサポートしているブラウザでのみ利用可能です。
(サポートされている具体的なブラウザは、参照URLのリンク先の記事に書かれています)

なお、提示されたコードは、かなり処理に無駄が多いと思います。
(まあ、やりたいことや、色々な前提による部分もあるかと思いますが)
質問用のサンプルコードでしたら良いですが、これでデータ量が増えてくると、結構重くなるかも。

参考URL：http://www.atmarkit.co.jp/fdotnet/chushin/introh …