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

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をセットする際に設定できるオプションは４種類
66// expires：有効なパス（日数）
67// path：有効なパス（ドメイン全体で利用したい場合は'/'を設定）
68// domain：有効なドメイン
69// secure：HTTPS接続の場合のみにcookieを送信（デフォルトはfalse)
70

退会済みユーザー

2020/04/21 01:19

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

行動規範の内容に同意します

回答1件

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  }