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

回答編集履歴

1

追記

2017/09/19 07:16

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -1,3 +1,70 @@
1
1
  config.phpに何が書いてあるか気になるところではありますが、
2
2
  有効期限があるCOOKIEやSESSIONではなくブラウザ側に保管する[LocalStorage](http://www.htmq.com/webstorage/)を利用されては?
3
- javascriptなどで明示的に削除するかユーザー自身がブラウザの開発ツールで削除(かブラウザ自体をアンインストール)するまでは永続的です。
3
+ javascriptなどで明示的に削除するかユーザー自身がブラウザの開発ツールで削除(かブラウザ自体をアンインストール)するまでは永続的です。
4
+
5
+ # サンプルソース
6
+
7
+ Cookie読む部分とHTML(<?php冒頭と途中のHTML省略)
8
+ ```php
9
+ $favorite = [];
10
+ if(array_key_exists("favorite",$_COOKIE)){
11
+ $favorite = explode("/",$_COOKIE["favorite"]);
12
+ }
13
+
14
+ $add_disp = "";
15
+ $remove_disp = "";
16
+ $none = ' style="display:none;"';
17
+ if(!in_array(1, $favorite)){
18
+ $remove_disp = $none;
19
+ }else{
20
+ $add_disp = $none;
21
+ }
22
+ ?>
23
+ <div class="favorite_btn">
24
+ <a onClick="add_fav(1); return false;" id="add_fav"<?=$add_disp?>>お気に入りに追加</a>
25
+ <a onClick="remove_fav(1); return false;" id="remove_fav"<?=$remove_disp?>>お気に入り</a>
26
+ </div>
27
+ ```
28
+
29
+ ajaxに送る部分
30
+ ```javascript
31
+ function add_fav(id){
32
+ $.ajax({
33
+ type: "POST",
34
+ url: "add_fav.php",
35
+ data: {
36
+ "id" : id
37
+ },
38
+ success: function(data){
39
+ $("#remove_fav").show();
40
+ $("#add_fav").hide();
41
+ alert("お気に入りに追加しました");
42
+ }
43
+ });
44
+ }
45
+ function remove_fav(id){
46
+ $.ajax({
47
+ type: "POST",
48
+ url: "remove_fav.php",
49
+ data: {
50
+ "id" : id
51
+ },
52
+ success: function(data){
53
+ $("#remove_fav").hide();
54
+ $("#add_fav").show();
55
+ alert("お気に入り削除");
56
+ }
57
+ });
58
+ }
59
+
60
+ ```
61
+
62
+ cssのadd_favクラスが何を指定しているか分かりませんが、
63
+ もしshow,hideしていたり何かしらボタン装飾しているようであれば、click時のイベントでclassの付け外しするのではなく、
64
+ ajaxのsuccessを以てclassの付け外しすべきと思います。
65
+ 万が一、ajaxが失敗した際に、「追加しました」「削除しました」の文言がalertされないのに
66
+ 装飾が変わっているということがあるのではと思います。
67
+
68
+ と、いうか、ご提示の組み方だとどちらかしかHTMLに出てないので、画面をリロードしない限りは
69
+ リンクの見た目は変わってても、ajaxが片方しか呼び出されないようになっていると思いますよ。
70
+ つまり、COOKIEに保存前だと常に「お気に入りへの追加」だけが起こっている状況ですね。