質問編集履歴
1
RiaFeed様にアドバイスを頂き、bottonの下にScriptをもってきて、ボタンが押せないエラーが解消いたしました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
|
|
18
18
|
### 実際のコード
|
|
19
19
|
jquery.cookie.jsを試す目的で下記作成しました。
|
|
20
|
-
結果は
|
|
20
|
+
結果はリロードするとカウントが0に戻ってしまうため、Cookieへの保存がうまく行っていない状況です。
|
|
21
21
|
参考サイト：https://webdesignday.jp/inspiration/technique/jquery-js/3704/
|
|
22
22
|
|
|
23
23
|
```HTML&jQuery
|
|
@@ -28,6 +28,13 @@
|
|
|
28
28
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
|
|
29
29
|
</head>
|
|
30
30
|
<body>
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
<p>「カウントアップ」クリックでカウントアップし、ブラウザを終了しない限り値を維持します。<br>
|
|
34
|
+
「リセット」クリックでcookieを削除します。</p>
|
|
35
|
+
<p>カウント:<span class="js-count-num"></span></p>
|
|
36
|
+
<button class="js-count-btn">カウントアップ</button><button class="js-reset-btn">リセット</button>
|
|
37
|
+
|
|
31
38
|
<script type="text/javascript">
|
|
32
39
|
var cookie = $.cookie('cookie');
|
|
33
40
|
if(cookie){
|
|
@@ -39,7 +46,7 @@
|
|
|
39
46
|
var count = $('.js-count-num').text();
|
|
40
47
|
$('.js-count-btn').on('click',function(){
|
|
41
48
|
count++;
|
|
42
|
-
$.cookie( "cookie",count);
|
|
49
|
+
$.cookie( "cookie",count,{expires:7});
|
|
43
50
|
$('.js-count-num').text(count);
|
|
44
51
|
});
|
|
45
52
|
$('.js-reset-btn').on('click',function(){
|
|
@@ -48,11 +55,6 @@
|
|
|
48
55
|
$('.js-count-num').text(count);
|
|
49
56
|
});
|
|
50
57
|
</script>
|
|
51
|
-
|
|
52
|
-
<p>「カウントアップ」クリックでカウントアップし、ブラウザを終了しない限り値を維持します。<br>
|
|
53
|
-
「リセット」クリックでcookieを削除します。</p>
|
|
54
|
-
<p>カウント:<span class="js-count-num"></span></p>
|
|
55
|
-
<button class="js-count-btn">カウントアップ</button><button class="js-reset-btn">リセット</button>
|
|
56
58
|
</body>
|
|
57
59
|
</html>
|
|
58
60
|
```
|