getCookie.jsがうまく機能してないみたいです

前提・実現したいこと

JavaScriptでCookieを設定して表示したいのですが、思ったように表示されない。

実行結果
null
Japan

期待する実行結果
秀和太郎
Japan

chromeのデベロッパーツールでサーバーのCookieを見ると下記のように
ちゃんと設定されています。

USER 　　　　%E7%A7%80%E5%92%8C%E5%A4%AA%E9%83%8E
COUNTORY Japan

テスト2を実行すると
実行結果
null
null
27

期待する実行結果
田中
Tokyo
27
となり、2つ目以降が表示されません。

27表示の後にエラーが出ています(デベロッパーツール)

発生している問題・エラーメッセージ

Failed to load resource: the server responded with a status of 404 (Not Found):5500/favicon.ico:1

該当のソースコード

JavaScript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8" />
5  <title>Cookieのデータを取り出す関数</title>
6	<script src="./js/jquery-3.4.1.min.js"></script>
7  <!--<script src="./js/getCookie.js"></script>-->
8<script>	function getCookie(name) {
9	//セミコロン『;』で分割
10	let data = document.cookie.split(';');
11
12  //個々のデータを順番に処理
13  for (var i = 0; i < data.length; i++) {
14
15      //キーと値を=で分割
16      let keyValue = data[i].split('=');
17
18      //キーの文字列とパラメータnameが一致するかどうかを調べている
19      //値の前後の空白を除去してデコードする
20      //keyValue[0]にはキーの文字列が入っている
21      if (trim(keyValue[0]) == name) {
22
23         //キーの文字列とパラメータnameが一致すれば
24         //値の前後の空白を除去してデコードして戻り値としている
25         //keyValue[1]にはキーに対する値が入っている
26        return decodeURIComponent(trim(keyValue[1]));
27      }
28  }
29  //該当するキーがなければnullを返す
30  return null;
31}
32
33//文字列の前後空白を削除する関数
34function trim(value) {
35  return value.replace(/(^\s＊) | (\s*$)/g, '');
36   //「^」が「文字列の先頭」を表す
37   //「^\s＊」は先頭から始まる空白文字という意味になる
38   //「＊」直前の文字の 0 回以上の繰り返しにマッチします。
39   //あるいは\s*空白文字の 0 回以上の繰り返し
40   //「$」は文字列の末尾を表す、「\s*$」は末尾にある全ての空白文字
41   //グローバル修飾子「g」は空白文字が連続して出現しても、
42   //全てが「’’」に変換される
43}</script>
44
45</head>
46<body>
47
48  <script>
49		document.cookie = "COUNTORY=Japan";
50
51		document.cookie = 'USER=' + encodeURIComponent('秀和太郎');
52
53    let user = getCookie('USER');
54
55    document.write(user);
56
57    document.write('<br>');
58
59    let country = getCookie('COUNTORY');
60
61    document.write(country);
62	</script>
63</body>
64</html>
65

JavaScript
1//test2
2<!DOCTYPE html><!-https://www.javadrive.jp/javascript/webpage/index17.html--->
3<html lang="ja">
4<head>
5<meta charset="UTF-8">
6<title>サンプル</title>
7<script src="./js/getCookie.js"></script>
8</head>
9<body>
10
11<h1>サンプル</h1>
12
13<p id="msg">Cookieの読み書きを行います。</p>
14
15<script>
16document.cookie = 'OLD=27';
17document.cookie = 'ADDRESS=Tokyo';
18let name = encodeURIComponent('田中');
19document.cookie = 'USER=' + name;
20
21let user = getCookie('USER');
22
23document.write(user);
24
25document.write('<br>');
26
27let add = getCookie('ADDRESS');
28
29document.write(add);
30
31document.write('<br>');
32
33let old = getCookie('OLD');
34
35document.write(old);
36
37</script>
38</body>
39</html>

試したこと

「文字列の前後空白を削除する関数」の箇所が間違っているかもしれません。
ネットでCookieに関するサンプルプログラムで練習して、試行錯誤したのですが
解決できないので、どなたか教えてください。お願いいたします。

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

XAMPP、VSCodeでコードを書いています。

デベロッパーツールで「27」表示の後に以下のエラー表示が出ています。

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

回答1件

ベストアンサー

chromeのデベロッパーツールでサーバーのCookieを見ると下記のように

ちゃんと設定されています。

httponlyのCookieだった、ということはありませんか？

投稿2022/01/08 23:45

maisumakun

総合スコア146018

maisumakun

2022/01/08 23:46

JavaScript経由でのセッションハイジャックを防ぐため、httponlyとしてJavaScriptからはアクセス不能なCookieとすることも可能です。

sanchunaka

2022/01/09 00:28

っ勉強不足ですみません。httponlyのCookieだったかどうかは、どこで調べるのでしょうか。 Cookie自体を、httponlyに設定しているのはどこなんでしょうか。セキュリティソフトなのか、chromeの設定なのでしょうか。わからないので教えていただけますか。

maisumakun

2022/01/09 00:30

> httponlyのCookieだったかどうかは、どこで調べるのでしょうか。 developer toolsにも出るかと思います。 > Cookie自体を、httponlyに設定しているのはどこなんでしょうか。サーバの指示です。

sanchunaka

2022/01/09 01:24

httponlyは空白になっています。

sanchunaka

2022/01/09 01:32

表示のコードを入れ替えてみましたが、最初に登録した document.cookie = 'OLD=27';の「27」のみの位置が変わるだけです。どうしてでしょうか。

sanchunaka

2022/01/09 01:41

document.cookie = 'USER=' + encodeURIComponent('秀和太郎');と document.cookie = "COUNTORY=Japan";を入れ替えると「秀和太郎」表示されるので./js/getCookie.jsは正常に機能しているのがわかりました。あとどこら辺が悪いのでしょうか。

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