質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Cookie

HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1796閲覧

Cookieを配列で保存し出力する際に、ページ読み込み時だけ表示がおかしい

christmas-tree

総合スコア12

Cookie

HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1グッド

0クリップ

投稿2018/12/22 06:17

編集2018/12/30 11:26

『ページ読み込み時』にCookieが出力できません。。

実現したいこと

「元のHTML」にある.Targetの『クリック時』にCookieを保存しJSONで即出力しています。

この出力について、
『クリック時』は「目的のHTML」になっていて良いのですが、
『ページ読み込み時』が「現状のHTML」になってしまいます。

質問は、「現在のjQuery」をどう改良すれば、『ページ読み込み時』に「目的のHTML」が出力できるかということです。

どうか宜しくお願い致します。

元のHTML

まずこちらのHTMLが表示されています。
.listはたくさん並びます。)

HTML

1<h1>クリスマスプレゼント</h1> 2<div class="list"> 3 <div class="userdata"> 4 <p> 5 <a href="http://example.com/girls/kelly"> 6 <span class="name1">ケリー</span> <span class="name2">@kelly</span> 7 </a> 8 </p> 9 </div> 10 <div data-item="バッグ" data-urltype="http://example.net/product/123" class="Target"> 11 <img src="" alt=""> 12 </div> 13</div> 14<div id="options_output"> 15<!-- Cookieの出力箇所 --> 16</div>

目的のHTML

上の.Target(img部分)の『クリック時』にCookieを保存し、それに合わせて上の<!-- Cookieの出力箇所 -->に次のHTMLがJSONで即出力されます。
目的は、これを『クリック時』だけでなく『ページ読み込み時』にも表示することなのですが、、、

html

1<div id="options_output"> 2<ul> 3 <li> 4 <p> 5 <a href="http://example.com/girls/kelly"> 6 <span class="name1">ケリー</span> 7 <span class="name2">@kelly</span> 8 </a> 9<span>クリスマスプレゼント</span>に欲しいのは<span data-urltype="http://example.net/product/123">バッグ</span>です。 10 </p> 11 </li> 12</ul> 13</div>

###現在のHTML
しかし、『ページ読み込み時』は上の「目的のHTML」では出力されず、こちらの出力になってしまいます。

html

1<div id="options_output"> 2{"user":["\n 3 <span class="\&quot;name1\&quot;">ケリー</span> 4 <span class="\&quot;name2\&quot;">@kelly</span> 5\n "], 6"title":["ffffffffffffクリスマスプレゼント"], 7"urltype":["http://example.net/product/123"], 8"item":["バッグ"] 9} 10</div>

現在のjQuery

「現在のHTML」を出力するjQueryがこちらです。どうすれば「目的のHTML」を『ページ読み込み時』に出力させることができるでしょうか?

jquery

1$(function(){ 2 var hers_length=5; 3 4 // クッキー登録 5 $('.Target').on('click',function(){ 6 7 var user = $(this).closest('.list').find('.userdata a').html(); 8 var title = $('h1').text(); 9 var urltype = $(this).attr('data-urltype'); 10 var item = $(this).attr('data-item'); 11 12 var params = JSON.parse($.cookie('options')||"{}"); 13 if(typeof params!=="object" || typeof params.title=="undefined"){ 14 params={ user: [], title: [], urltype: [], item: [] }; 15 } 16 17 params.user.push(user); 18 params.title.push(title); 19 params.urltype.push(urltype); 20 params.item.push(item); 21 22 if( params.user.length>hers_length){ 23 params.user.shift(); 24 params.title.shift(); 25 params.urltype.shift(); 26 params.item.shift(); 27 } 28 29 var ul=$('<ul>'); 30 params.user.forEach(function(){ 31 var output = '<p>'+user+'が<span>'+title+'</span>に欲しいのは<span data-urltype='+urltype+'">'+item+'</span>です。'; 32 $('<li>').append(output).appendTo(ul); 33 }) 34 35 $('#options_output').html(ul); 36 $.cookie('options', JSON.stringify(params)); 37 38 }); 39 40 // クッキー呼び出し 41 var cookie = $.cookie('options'); 42 if(cookie){ 43 $('#options_output').html(cookie); 44 } 45 46});

補足情報(FW/ツールのバージョンなど)

jQueryは2.1.3です。
cookieの保存には、jQueryプラグイン「jquery.cookie.js」を使用しています。

動作サンプルです。
https://jsfiddle.net/fh5eLcwj/

bochan2👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/12/22 06:42

適切な書き方とは?質問の意図がよくわかりません。今何かしらの問題や課題が起きているわけではないのでしょうか
Lhankor_Mhy

2018/12/22 06:43

『適切な書き方』とは、具体的にはどうなることが「適切」だと考えているのですか? また、現状はどういったことが「不適切」だとお考えなのでしょうか?
christmas-tree

2018/12/22 10:45 編集

文章ちょっと変えておきました…
Lhankor_Mhy

2018/12/22 12:05

『正しい書き方』とは、具体的には何でしょう? ご提示のコードは、質問者の想定と違う動作をするのですか? そうだとしたら「こうなる」と想定していたが「こうなった」のように、具体的に書いてください。 そうではなくて、別の意味で『正しい書き方』をお求めでしたら、それが何であるか他人にもわかるように書いてください。
christmas-tree

2018/12/29 11:04

失礼しました。 ページ読み込み後も「目的のHTML」が出力されると想定しておりましたが、「現在のHTML」になってしまいます。 これを「目的のHTML」にすべく『正しい書き方』を知りたいです。 ご検討宜しくお願い致します。
guest

回答1

0

ベストアンサー

ざっとしか見ていませんが、下記変数cookieにはJSON.stringify()でJSON文字列化したオブジェクトが格納されており、そのままでは意図通りに出力できません。JSON.parse()して中身を必要なHTMLに書き換えて出力しないといけません。

js

1 // クッキー呼び出し 2 var cookie = $.cookie('options'); 3 if(cookie){ 4 $('#options_output').html(cookie); 5 }

【JSON.parse() | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

投稿2018/12/30 03:49

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

christmas-tree

2018/12/30 08:09

JSON.parse()ですか。ありがとうございます。 たとえば、次のように換えてみると何も出力されなくなりましたが、具体的にはどの部分をJSON.parse()させるのでしょうか? var cookie = $.cookie('options'); if(cookie){ obj = JSON.parse(cookie); $('#options_output').html(obj); }
kei344

2018/12/30 08:16

中身を必要なHTMLに書き換えて出力しないといけません。 前半のコード部分で同じような処理をしているので、参考にされてはいかがでしょうか。
christmas-tree

2019/01/03 17:26

こんばんは。夜分に大変失礼致します。 あれからかなり調べまして、教えて頂いた JSON.parse() を使い次のコードを試すまでこぎつけたのですが、、どうしてもできません。 https://codepen.io/anon/pen/maXwmx 質問した出力についてはできるようになったのですが、しかし、2つある画像の片方の情報で上書きされてしまいうという問題が発生しています。 何かよくあるミスやアドバイスなど、どうか今一度頂戴することはできませんでしょうか。もしお手すきの折にご覧頂けましたら幸いです。
Lhankor_Mhy

2019/01/05 03:07

横から失礼します。 > christmas-tree さん .html() メソッドは、内部要素を全て捨てて新しくしますので、そうなりますよ。.append() などを使ってはいかがですか?
Lhankor_Mhy

2019/01/05 03:11

ああ、いや、違うな。忘れてください。失礼しました。 クリックするたびにデータを作り直しているのが原因かと思います。 この件に関しては別質問を立てた方が早いと思いますよ。
christmas-tree

2019/01/05 05:30

たしかに、本来の質問と違いますね。別質問を立てるように致します。 お二人ともどうもありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問