jQueryを使ってHTMLのcookieを保存・表示する方法
- ボタンをクリックしてxmlからデータを読み込み、表示します。
- 他のページに移動して戻ってきたときに最後に表示した内容を保持し、表示させる方法を考えています。
- 現在のソースコードでは、内容が少ない場合は表示されますが、内容が多くなると表示されなくなる問題が発生しています。原因を特定できずに困っています。
- ベストアンサー
jquery htmlのcookie保存・表示
まず、やろうとしていることはボタンをクリックし、その中身と同じデータを持つものを 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の処理がおかしいのか 理由がわからず困っています。 どうかご教授お願いいたします。
- eeiina
- お礼率50% (27/54)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
私は、を使ったことはないので、その部分についてのコメントはできませんが、 cookieには、最大4KBという、サイズの制限があります。 元々cookieは、それほど大きなデータを保存するためのものではないです。 この例の場合ですと、変数valに相当する値をcookieに保存しておき、ページが最表示された場合には再度XMLから読み直す方法にするのが通常の作り方かと思います。 取得するXMLの値がその時によって異なり、ページには初回表示時のデータを表示したい場合は、cookieとしての合計サイズが4KBを超える可能性のある場合はサーバ側に保存するか、HTML5依存になりますがWeb Storageを使うなどの方法になるかと思います。 参照URLに、Web Storageの解説ページ例を入れておきます。 上にも書いたように、この方法はHTML5のWeb Storageをサポートしているブラウザでのみ利用可能です。 (サポートされている具体的なブラウザは、参照URLのリンク先の記事に書かれています) なお、提示されたコードは、かなり処理に無駄が多いと思います。 (まあ、やりたいことや、色々な前提による部分もあるかと思いますが) 質問用のサンプルコードでしたら良いですが、これでデータ量が増えてくると、結構重くなるかも。
その他の回答 (1)
- idaroi
- ベストアンサー率60% (6/10)
訂正：先の回答の1行目は、別で書いていた文章のゴミなので、無視してください。
関連するQ&A
- jqueryにてIEでの不具合 each処理？
cromeやfirefoxでは正常に動きますが、IEにて一部動いてくれない部分があり困っています。 おかしな点や原因など教えていただきたくご質問させていただきます。 <style> .that{color:red;} </style> <script type="text/javascript"> $(function(){ $('button').click(function(){ $('#list>ul').removeClass('that'); var val = $(this).text(); $('#list>ul li').each(function(){ if($(this).text() == val){ $(this).parent().addClass('that'); }; }); }); }); </script> html↓ <button>100</button> <button>200</button> <button>300</button> <div id="list"> <ul> <li>100</li><li>200</li> </ul> <ul> <li>300</li><li>200</li> </ul> </div> クリックしたボタンの数値があるULの色を変えるものです。 100と300をクリックした場合は正常に変わりますが、200をクリックした時に変わらなくなります。 <li>の中で最後に書かれている数値が効かなくなるようで、<li>の100と200を入れ替えると100が効かなくなります。（IEのみ） 原因等わかりましたらよろしくお願いいたします。
- ベストアンサー
- JavaScript
- jQueryでXMLを操作
jQueryでXMLを操作 最近jQueryを勉強しはじめました。 jQueryでXMLを読み込んで、item val="new"を含んだデータのみ<ul></ul>内に表示したいのですが うまくいきません。 ご教授願います。 また、こういったjQueryの使い方に関する、お勧めの本やページ等ございましたら 教えてください。宜しくお願い致します。 -------------------------XML Data------------------------- <data> <item val="new"> <link>01.html</link> <name>ほげ田 ほげ太</name > <photo>dummy.jpg</photo> </item> <item val="new"> <link>02.html</link> <name>ほげ田 ほげ子</name > <photo>dummy.jpg</photo> </item> <item val="new"> <link>03.html</link> <name>ほげ山 ほげ太</name > <photo>dummy.jpg</photo> </item> <item> <link>04.html</link> <name>ほげ山 ほげ子</name > <photo>dummy.jpg</photo> </item> </data> -------------------------JavaScript------------------------- $(function(){ $.ajax({ url: 'doctors/data.xml', dataType: 'xml', timeout: 1000, error: function(){ alert("xmlファイルの読み込みに失敗しました"); }, success : function(data){ $("item",data).each(function(){ if($("item",this).attr("val") == "new"){ $(".column").append('<li><a href="'+$("link",this).text()+'"><img src="image/'+$("photo",this).text()+'" alt="'+$("name",this).text()+'" title="'+$("name",this).text()+'"></a></li>'); } }) } }) $("li.noJavaScript").remove(); }) -------------------------HTML------------------------- <div id="wrapper"> <ul class="column"> <li class="noJavaScript">javaScriptを有効にしてください。</li> </ul> </div>
- ベストアンサー
- JavaScript
- jQueryで4枚の画像がフェードアウトで切り替え
4枚の画像をフェードアウトで切り替えるものをjQueryのサイトを参考に作成しました。 そこで、その右側に4つのボタンのようなものを配置し、 1枚目の画像が表示されているときは1つめのボタンが 2枚目の画像が表示されているときには2つめのボタンが 選択されたような状態になり、 「現在表示されている画像はこのボタンのものです」というようなものを実行したいです。 途中まで、作業は進んでおり、 ■javaScript <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var setImg = '#contentsleft'; var fadeSpeed = 1500; var switchDelay = 4000; $(setImg).children('img').css({opacity:'0'}); $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed); setInterval(function(){ $(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg); },switchDelay); }); ■HTML <div id="contentsleft"> <img src="./imgs/aaa01.jpg" alt="ホーム"> <img src="./imgs/bbb02.jpg" alt="ホーム"> <img src="./imgs/ccc03.jpg" alt="ホーム"> <img src="./imgs/ddd04.jpg" alt="ホーム"> </div> <button id="btn01">１</button> <button id="btn02">２</button> <button id="btn03">３</button> <button id="btn04">４</button> となっています。 javaScriptのところで、1枚目が表示されているときに1つめのボタンを選択状態にする。 というような処理を施せばよいのでしょうが、知識不足でお手上げ状態です。 ご教授いただければと思います。 よろしくお願いします。
- ベストアンサー
- JavaScript
- jQueryでプルダウンメニュー
jQueryでプルダウンメニューを作ろうと思いまして、 とりあえず、リストにカーソルを合わせるとネストしたリストが表示されるようにしてみましたが、 うまく動きません。どうしてでしょうか？ ソースです↓ <!DOCTYPE HTML> <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"> </script> <script type="text/javascript"> google.load("jquery", "1"); </script> <script type="text/javascript"> $(function(){ $(ul li).hover( function(){ $(this).children(ul).show();}, function(){ $(this).children(ul).hide();} ); }); </script> </head> <body> <ul> <li>MENU <ul style="display:none;"> <li>sub-MENU1</li> <li>sub-MENU2</li> </ul> </li> </ul> </body> </html>
- ベストアンサー
- JavaScript
- JQueryで、liタグの背景に色を付けたい。
JQueryで、各liタグに背景色を付けたいのですが、 上手くいきません。多分clickあたりで間違ってると思うのですが・・・。 そもそも、clickの後ろには、functionを書けばいいのか？(以下ソースと同じ) それとも$だけなのか、概念がはっきり分かってません。 書き方等の解説をしてくれているページはないでしょうか・・・。 いろいろ調べてみたのですが、こうかけば動く。見たいな事しか書いてなくて 基本があやふやになっております。 ご教授お願いします。 ====以下ソース==== <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>jQueryテスト</title> <script type="text/javascript" src="../jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function(){ $("input:button").click(function('#list'){ .find('li.high').css('backgroundColor', 'red').end() .find('li.middle').css('backgroundColor', 'green').end() .find('li.low').css('backgroundColor', 'blue'); }); }); </script> </head> <body> <ul id="list"> <li class="high">a</li> <li class="middle">b</li> <li class="low">c</li> </ul> <form> <input type="button" value="背景変更"> </form> </body> </html>
- ベストアンサー
- JavaScript
- jQuery - bind('click', x)
<!DOCTYPE html> <script src="jquery-1.7.1.js"></script> <style> .menu_items { display: none; } </style> <script> $(function() { $('.dropdown').each(function () { var menu = $(this).parent().children('.menu_items'); var hideFunc = function() { menu.slideUp(120); $(document).unbind('click', hideFunc); }; $(this).click(function() { menu.slideDown(120); $(document).bind('click', hideFunc); }); }); }); </script> <div> <button class="dropdown">Currency</button> <ul class="menu_items"> <li><button>USD</button> <li><button>EUR</button> <li><button>GBP</button> </ul> </div> -- jquery でメニューに表示・非表示をしたいと思ってます。 click したあとに、メニューを消す命令を bind してるってのに、 この hideFunc （メニューを消す命令） がすぐ呼ばれてしまいます。 適当な配列をフラグに使って二回目呼ばれたときには消す、みたいな解決策を思い来ましたが、 いまいちスマートな感じがしません。 ちゃんとクリックが終わったあとに hideFunc をバインドしたいのですが、それはなにかいい書き方あれば教えてください
- 締切済み
- JavaScript
- Cookie情報の取得と表示
特定のCookieを取得し、ページに表示させるスクリプトについて質問させていただきます。 現在、Cookieに保存されたハンドルネーム（２バイト文字も含む）の情報を取得し、 ページ上に表示させるスクリプトを作成しています。 Googleで検索した参考サイトを参考に以下のスクリプトを試してみましたが、 ２バイト文字（”ああああ”等）については表示されないか、”%54%454%121%”のような文字化けになってしまいます。「test」のような１バイト文字については普通に表示されます。 いろいろ調べた結果、システムからCookieに保存する際に、文字コードがUTF8ではなく、SJISで保存されているため、「test」などの１バイト文字は普通に取得できますが、「ああああ」などの２バイト文字についてはバイナリデータとして扱われ、取得できない？ようになっているようです。 単にシステムからCookieに保存する際に「UTF8」で保存すればいいのかもしれませんが、可能ならJavascriptの何らかの処理で解決できればと考えております。 どなたかお分かりになれば、ご教授いただけませんでしょうか？ 以下が現在テストしているスクリプトコードです。 <script language="JavaScript"> <!-- function GetCookie(name){ var st=""; var ed=""; var temp=""; if (document.cookie.length>0){ st=document.cookie.indexOf(name + "="); if (st!=-1){ st=st+name.length+1; ed=document.cookie.indexOf(";",st); if (ed==-1)ed=document.cookie.length; temp = document.cookie.substring(st,ed); } } decodeURIComponent(temp); return ""; } // --></script> <script language="JavaScript"> <!-- User = GetCookie('fmcHN'); // ハンドルネーム取得 document.write(User,"さん"); // --></script>
- ベストアンサー
- JavaScript
- jquery クリックデータの渡し？
元htmlの <li><img src="●●" title="●●"></li> をクリックするとそのデータを新規サブウィンドウを生成し表示することをしています。 そこで、使用している以下のスクリプト部分の役割や意味など説明できる方がいらっしゃいましたら教えてください。お願いします。 var Class = function ( elem, options ) { elem.data ( p, this ); elem.find('img').each ( function(index) { $(this).click ( function() { openThumbnail ( options, elem.find('img'), $(this) ) var adn = $(this).attr('src') }).mouseover ( function() { $(this).css ( 'cursor', 'pointer' ); }); }); };
- ベストアンサー
- JavaScript
- jqueryプルダウンメニュー個別着色
すみません。デザイナーでjqueryの配布しているものをお借りしているのですが、 プルダウンメニューで、メニューの色を個別に変えたいのですが、 CSSクラス名ごとに、下記のスクリプトを書かないといけないのでしょうか？ それとも、$('.btn')のところを、＄（'.btn','.btn2','.btn3')とかって省略はできますか？ 基本を解ってなくてすみません； どうぞ宜しくお願い致しますm（＝＝）m <script type="text/javascript"> $(function(){ $('.btn').hover(function(){ var btn = $(this).find('li').length; $(this).animate({'height':24 * btn + 'px'},'fast'); },function(){ $(this).animate({'height':'24px'},'fast'); }); }); </script>
- ベストアンサー
- JavaScript
- Jqueryでリストのスクロール
<ul><li></li></ul>にて作成したリストで選択した行の背景色を変更し、選択した行が リストの先頭にスクロールするするサンプルを試しに作成してみました。 Jqueryを使用して下記のように作成してみましたが選択行がリストの先頭にうまくスクロールしずに 微妙な位置までスクロールして止まってしまいます。うまくリストの先頭に来るようにスクロールさせる にはどのようにすればよろしいでしょうか。 【サンプル】 <html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function(){ $("ul.update-scroll li").click(function() { $("ul.update-scroll li").each(function(){ // 既に選択済の場合、選択を解除 if( $(this).hasClass("selected") ) { //alert( $(this).text() ); $(this).toggleClass("selected"); } }); // 選択済に変更 $(this).toggleClass("selected"); // 選択済の位置がリストの先頭に来るようにスクロール //var i = $(this).index(); var p = $(this).offset().top; //alert(p); $("ul.update-scroll").animate({ scrollTop: p }, "fast"); }); }); </script> <title>CSS</title> <style type="text/css"> ul.update-scroll { list-style-type: none; width: 400px; height: 100px; overflow-y: scroll; border: 2px solid #bbb; padding-left: 1.5em; } ul.update-scroll li { margin-top: 0.3em; } ul.update-scroll li.selected { background:red; } ul.update-scroll a { text-decoration: none; } </style> </head> <body bgcolor="rgba(255,0,0,0.15)"> <ul class="update-scroll"> <li>[2010/01/03]： <a href="javascript:void(0);">項目10</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目9</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目8</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目7</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目6</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目5</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目4</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目3</a></li> <li>[2010/01/02]： <a href="javascript:void(0);">項目2</a></li> <li>[2010/01/01]： <a href="javascript:void(0);">項目1</a></li> </ul> </body> </html>
- ベストアンサー
- JavaScript
お礼
ご回答ありがとうございました。 変数valのみ保存、読み直しで動作できました。 簡潔なコードにできるように勉強していきたいと思います。 Web Storage大変ためになりました、是非活用できればと思います。