cookieで保存された値を表示させる

cookieで保存した値を表示させたいのですが、
入れたい場所（strong.visitor）に表示されず、空タグとなってしまいます。

cookieで、値が保存されていることは確認しました。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="Shift_JIS">
5    <title>タイトル</title>
6<script type="text/JavaScript" src="js/jquery.js"></script>
7<script type="text/JavaScript">
8        // クッキーの値を取得 getCookie(クッキー名); //
9        function getCookie(c_name) {
10            var st = "";
11            var ed = "";
12            if (document.cookie.length > 0) {
13                // クッキーの値を取り出す
14                st = document.cookie.indexOf(c_name + "=");
15                if (st != -1) {
16                    st = st + c_name.length + 1;
17                    ed = document.cookie.indexOf(";", st);
18                    if (ed == -1) ed = document.cookie.length;
19                    // 値をデコードして返す
20                    return unescape(document.cookie.substring(st, ed));
21                }
22            }
23            return "";
24        }
25
26   // クッキー保存　setCookie(クッキー名, クッキーの値, クッキーの有効日数); //
27        function setCookie(c_name, value, expiredays) {
28            // pathの指定
29            var path = location.pathname;
30            // pathをフォルダ毎に指定する場合のIE対策
31            var paths = new Array();
32            paths = path.split("/");
33            if (paths[paths.length - 1] != "") {
34                paths[paths.length - 1] = "";
35                path = paths.join("/");
36            }
37            // 有効期限の日付
38            var extime = new Date().getTime();
39            var cltime = new Date(extime + (60 * 60 * 24 * 1000 * expiredays));
40            var exdate = cltime.toUTCString();
41            // クッキーに保存する文字列を生成
42            var s = "";
43            s += c_name + "=" + escape(value);// 値はエンコードしておく
44            s += "; path=" + path;
45            if (expiredays) {
46                s += "; expires=" + exdate + "; ";
47            } else {
48                s += "; ";
49            }
50            // クッキーに保存
51            document.cookie = s;
52        }
53// ④クッキーに値がセットされていれば値を表示
54
55function Title(){
56	if(getCookie('vstitle1')){
57		$("span.visit").text( getCookie('vstitle1') );
58	}
59else{
60	echo , test;}
61 }
62/*function Title(){
63	if(getCookie('vstitle1')){
64		var vstitle1 = getCookie('vstitle1');
65		$("strong.visit").text( getCookie('vstitle1') );
66	}
67else{
68	echo , test;}
69 }*/
70
71
72
73//①空きチェック forループで　そのクッキーが存在するかをチェック  isset($_COOKIE["vstitle"]))
74//  空いてたら中断する 一番が存在しなかったら、そのループ内にいれる、保存できる空き容量にメモリーカウントが4だったら終了する  break
75//②保存処理をする setCookie
76//③ウィンドウで表示 window.alert
77
78	 function TitleWrite() {
79		 //初期値設定
80		var breakcunt = 4;
81		for( i=0; i<4; i++ ){
82		if (getCookie('vstitle'+(i+1)) ==""){
83		breakcunt = i;
84		break ;
85		}
86		}
87		
88		if(breakcunt>3){
89			window.alert('空きありません');
90			return "";
91		}
92		
93		else{
94		  var vstitle = document.getElementsByClassName('title');//jqueryだと短く済む
95		  setCookie('vstitle'+(breakcunt+1), $('.title').text(), 7);
96		  window.alert('保存しました');
97		}
98		
99		
100		
101}
102
103	
104</script>
105
106</head>
107<body>
108<h2 class="title">titleを記録</h2>
109<p><strong class="visit"></strong></p>
110<!--<ul><strong class="visit"></strong></ul>-->
111<button id="setButton" onclick="TitleWrite();">保存</button>
112</body>
113</html>

motisen

2017/11/16 14:17

cookieの属性にhttponlyがついているということはありませんか？

退会済みユーザー

2017/11/16 14:29

つけていません。

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

回答1件

ベストアンサー

ざっとみたので他も有るかもしれませんが、下記部分が間違っています。

JavaScript
1// $("strong.visitor").$('.title').text();
2//              ↓ クラス名が間違っている
3   $("strong.visit").text( getCookie('vstitle1') ); // ← 値を入れる

また、HTMLの構文もおかしいです。ul要素の直下にstrong要素は置けません。

【ul 要素 - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/ul

あと、文字エンコーディングはUTF-8が推奨されています。

【HTMLで文字エンコーディングを指定する】
https://www.w3.org/International/questions/qa-html-encoding-declarations.ja

投稿2017/11/16 13:40

kei344

総合スコア69398

退会済みユーザー

2017/11/16 13:49

ありがとうございます、 javascriptのソースと、 HTMLの構文を修正させていただきましたが、値が表示されませんでした。。

kei344

2017/11/16 13:57

回答が付いた質問の編集は慎重に行ってください。質問文のコードについて回答にて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。

退会済みユーザー

2017/11/16 14:27

かしこまりました。次回から気を付けます。修正前のソースをコメントアウトし追加しております。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.49%

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

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

質問する

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

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

cookieで保存された値を表示させる

関連した質問