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

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

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

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

HTML

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

Q&A

1回答

1173閲覧

cookieへの保存ができません。」

apple.ringo

総合スコア10

jQuery

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

HTML

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

0グッド

0クリップ

投稿2020/04/19 00:41

cookieに値を保存してconsole.logでGoogle Chromeの開発ツールで中身を見ようとしたのですが、cookieの中身がないっぽいです。

原因がわかりません。。
分かる方お願いします。

htmlとjQueryのソースコードを貼っておきます。

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="app.css"> 7 <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> 8 <script src="jquery-cookie-master/src/jquery.cookie.js"></script> 9</head> 10<body> 11 12 <div class="main"> 13 <h2 style="text-align:center;">あなたのブラウザのCookieを見る限り、<br> 14 あなたの名前は<span class="js-get-cookie_data"></span>ですね?</h2> 15 16 <h3 style="text-align:center;"> 17 あなたはこのページ<span class="js-get-visit_num"></span>回きてますね? 18 </h3> 19 20 <h3 style="text-align:center;"> 21 カートにはまだ「<span class="js-get-cart"></span>」が入っています。購入しますか? 22 </h3> 23 24 <div style="text-align:center;"> 25 <p>ボタンを押すとカートに入ります</p> 26 <button class="js-set-cart">上着</button> 27 <button class="js-set-cart">シャツ</button> 28 <button class="js-set-cart">ズボン</button> 29 <button class="js-set-cart">靴下</button> 30 </div> 31 32 </div> 33<script src="app.js"></script> 34</body> 35</html>

javascript

1 console.log(document.cookie); 2 3 //cookieを書き込む 4 document.cookie = 'name=tamu'; 5 document.cookie = 'sex=' + encodeURIComponent('man'); 6 document.cookie = 'favoraite_sports=' + encodeURIComponent('soocer'); 7 8 console.log(document.cookie); //name=tamu; sex=man; favoraite_sports=soocer; 9 10 //cookieの名前を指定して取り出す。 11 console.log(getCookie('name')); 12 13 // 訪問数カウント 14 $('.js-get-cookie_data').html(getCookie('name')); 15 16 var visitNum = getCookie('visitNum'); 17 if(visitNum){ 18 visitNum++; 19 document.cookie = 'visitNum=' + visitNum; 20 } else { 21 document.cookie = 'visitNum=1'; 22 } 23 24 $('.js-get-visit_num').html(getCookie('visitNum')); 25 26 function getCookie(key){ 27 // Cookieから値を取得する 28 var cookieString = document.cookie; 29 30 // 要素ごとに";"で区切られているので、";"で切り出しを行う 31 var cookieKeyArray = cookieString.split(";"); 32 33 // 要素分ループを行う 34 for(var i=0; i < cookieKeyArray.length; i++){ 35 var targetCookie = cookieKeyArray[i]; 36 37 // 前後スペースをカットする 38 targetCookie = targetCookie.replace(/^\s+\s+$/g, ""); 39 40 var valueIndex = targetCookie.indexOf("="); 41 if(targetCookie.substring(0, valueIndex) == key){ 42 // キーが引数と一致した場合、値を返す 43 return encodeURIComponent(targetCookie.slice(valueIndex + 1)); 44 } 45 } 46 47 return ""; 48 } 49 50// jquery.cookie.jsを使った場合 51 52// $('.js-set-cart').on('click', function(){ 53// var cart = $.cookie('cart'); 54// var shouhin = $(this).text(); 55// if(cart){ 56// $.cookie('cart', cart + ',' + shouhin, { expires: 7, path: '/' }); 57// } else { 58// $.cookie('cart' ,shouhin, { expires: 7, path: '/' }); 59// } 60// location.reload(); 61// }); 62// 63// $('.js-get-cart').html($.cookie('cart')); 64 65// cookieをセットする際に設定できるオプションは4種類 66// expires:有効なパス(日数) 67// path:有効なパス(ドメイン全体で利用したい場合は'/'を設定) 68// domain:有効なドメイン 69// secure:HTTPS接続の場合のみにcookieを送信(デフォルトはfalse) 70

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2020/04/21 01:19

cookie て基本リアルタイムに変更されるものじゃないから反映もリアルタイムじゃないのでは?
guest

回答1

0

jQueryが入っているのであれば、以下の方法でいかがでしょう?
(すみません、動作検証はしてません)

javascript

1 var houmon = houmonsuu(); 2 $('.js-get-cookie_data').html(houmon); 3 4 function houmonsuu(){ 5 //現在の訪問数を取得、訪問数がなければ0とする 6 var data = $.cookie('kitakazu') || 0; 7 //今回の訪問数を加算して保存 8 data++; 9 $.cookie('kitakazu',data); 10 //訪問数を返却 11 return data; 12 }

※あと、テストだとは思いますが、'name'やgetCookieという名前はオーバーライドしやすいかな…と…。

投稿2020/04/23 00:02

arcrista_qg

総合スコア70

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問