teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

サンプルソースの追加

2017/09/20 01:49

投稿

rkojima
rkojima

スコア421

answer CHANGED
@@ -1,4 +1,87 @@
1
1
  COOKIEに保存するだけならajaxは不要だと思います。
2
2
  http://qiita.com/takanorip/items/4e23b803bb1393176636
3
3
 
4
- PHP側でCOOKIE保存以外の処理もする予定で、ajaxも必須要件なのでしょうか?
4
+ PHP側でCOOKIE保存以外の処理もする予定で、Ajaxも必須要件なのでしょうか?
5
+
6
+ ---
7
+
8
+ 以下追記
9
+
10
+ COOKIEの操作をするだけなら、Ajaxで通信挟むよりJavaScriptだけで完結したほうが通信リソース/サーバリソースを使わないのでいいと思います。
11
+
12
+ これ以上は本題から外れてしまうため、Ajax使わない場合のサンプルだけ提示します。
13
+
14
+ 動作デモ
15
+ https://jsfiddle.net/2kkphpyd/
16
+
17
+ ```HTML
18
+ <a href="#" class="favorite add_fav" data-id="1">お気に入りに追加</a><br>
19
+ <a href="#" class="favorite add_fav" data-id="2">お気に入りに追加</a><br>
20
+ <a href="#" class="favorite add_fav" data-id="3">お気に入りに追加</a><br>
21
+ ```
22
+
23
+ ```JavaScript
24
+ $(function(){
25
+ $(".favorite").on('click', function(){
26
+ if ($(this).hasClass("add_fav")) {
27
+ addFavorite( $(this).data('id'));
28
+ elementLookFavorite(this, true);
29
+ } else {
30
+ deleteFavorite( $(this).data('id'));
31
+ elementLookFavorite(this, false);
32
+ }
33
+
34
+ return false;
35
+ });
36
+
37
+ var elementLookFavorite = function(targetElement, isfavorite) {
38
+ if (isfavorite) {
39
+ $(targetElement).text("お気に入り解除");
40
+ $(targetElement).toggleClass('add_fav', false);
41
+ } else {
42
+ $(targetElement).text("お気に入りに追加");
43
+ $(targetElement).toggleClass('add_fav', true);
44
+ }
45
+ };
46
+
47
+ var addFavorite = function(id) {
48
+ var fav = loadCookieFavorite();
49
+ if (fav.indexOf(String(id)) === -1) {
50
+ fav.push(id);
51
+ saveCookieFavorite(fav);
52
+ } else {
53
+ window.alert('すでにお気に入りに入っています');
54
+ }
55
+ };
56
+
57
+ var deleteFavorite = function(id) {
58
+ var fav = loadCookieFavorite();
59
+ var idx = fav.indexOf(String(id));
60
+ if (idx !== -1) {
61
+ fav.splice(idx, 1);
62
+ saveCookieFavorite(fav);
63
+ }
64
+ };
65
+
66
+ var saveCookieFavorite = function(favArr) {
67
+ document.cookie = "favorite=" + favArr.join('/');
68
+ };
69
+
70
+ var loadCookieFavorite = function() {
71
+ var cookies = document.cookie.split(';')
72
+
73
+ for (idx in cookies) {
74
+ if ( ! cookies.hasOwnProperty(idx)) {
75
+ continue;
76
+ }
77
+
78
+ if (cookies[idx].indexOf('favorite=') == 0) {
79
+ var favStr = cookies[idx].substr('favorite='.length);
80
+ return (favStr.length==0) ? [] : favStr.split('/');
81
+ }
82
+ }
83
+
84
+ return [];
85
+ };
86
+ });
87
+ ```