cookieでセットした値を削除する

セットされた、クッキー名vstitle1を
削除ボタンをクリック後に削除するようにしたいのですが
削除できません。

クッキーの保存と、クッキーがセットされていれば、値を表示
までは、確認できましたが、その後の削除がうまくいきません。

ご教授お願いいたします。

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// ②クッキーに値がセットされていれば値を表示
55     function Title() {
56		  var vstitle1 = getCookie('vstitle1');
57		  var vstitle2 = getCookie('vstitle2');
58		  var vstitle3 = getCookie('vstitle3');
59		  var vstitle4 = getCookie('vstitle4');
60			if (getCookie('vstitle1') !=="") {
61        　　    $("strong").text(vstitle1);
62// ③クッキーの削除
63		$(".Titlebtn").click(function () {
64  var dt = new Date('1999-12-31T23:59:59Z'); // 過去の日付をGMT形式に変換
65    document.cookie = "key1=; expires=" + dt.toUTCString();
66    document.cookie = "key2=; max-age=0";
67});
68            }
69           if (getCookie('vstitle2')!=="") {
70                $("strong").text(vstitle2);
71      }
72		          if (getCookie('vstitle3')!=="") {
73                $("strong").text(vstitle3);
74      }
75		          if (getCookie('vstitle4')!=="") {
76                $("strong").text(vstitle4);
77      }
78	
79			else{}
80        }
81
82
83
84// 複数のtitleの内容を記憶する
85//空きチェック
86
87	 function TitleWrite() {
88		 //初期値設定
89		var breakcunt = 4;
90		for( i=0; i<4; i++ ){
91		if (getCookie('vstitle'+(i+1)) ==""){
92		breakcunt = i;
93		break ;
94		}
95		}
96		
97		if(breakcunt>3){
98			window.alert('空きありません');
99			return "";
100		}
101		
102		else{
103		  var vstitle = document.getElementsByClassName('title');
104		  setCookie('vstitle'+(breakcunt+1), $('.title').text(), 7);
105		  window.alert('保存しました');
106		  Title();
107		}
108		
109}
110$(function() {
111	 Title();
112});
113
114	
115</script>
116
117</head>
118<body>
119<h2 class="title">titleを記録</h2>
120<div><strong class="visit"></strong><input class="Titlebtn" type="submit" value="削除" /></div>
121<button id="setButton" onclick="TitleWrite();">保存</button>
122</body>
123</html>

m.ts10806

2017/11/17 00:23

インデントがめちゃくちゃでソースコードが読みづらいので調整してもらえますか？また毎度ですが「うまくいきません。」では何がおきているのか伝わりません。起きている現象、エラーメッセージなど具体的に記述してください。

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

回答2件

そもそもですが、
$(".Titlebtn").click(function() {
上記ボタンクリックのイベントがTitle()の中に入っているのでボタン押しても何も起きないですよ。
$(function(){});の中など、クリックイベントが参照できる場所に移動させてください。

また、せめてalert()かconsole.log()で何か文言を出力し、「ここまで通っている」確認ができるようデバッグの仕方は覚えておいた方が良いです。

投稿2017/11/17 00:34

編集2017/11/17 00:35

m.ts10806

総合スコア80850

ベストアンサー

javascript
1// ③クッキーの削除
2    ...
3    var dt = new Date('1999-12-31T23:59:59Z'); // 過去の日付をGMT形式に変換
4    document.cookie = "key1=; expires=" + dt.toUTCString();

key1=; の部分は、「key1」に保存されたcookieを削除、という指定になります。
今回削除したいのは「vstitle1」～「vstitle4」かと思いますので、key1の部分をそれぞれに変えてあげてください。

document.cookie = "vstitle1=; expires=" + dt.toUTCString();
...
document.cookie = "vstitle4=; expires=" + dt.toUTCString();

Cookie操作処理のサンプルは、下記サイトのサンプルが参考になると思います。
※ソースを丸コピで使うのではなく「どんな処理をしているか。どんな書き方で書いているか」という視点で参考にしてください。
https://developer.mozilla.org/ja/docs/Web/API/Document/cookie#リトルframework_Unicodeをサポートしたクッキーの完全な読み書き

投稿2017/11/17 00:24

編集2017/11/17 00:35