第二次点击后如何销毁cookie答案

【问题标题】：how to destroy cookie after second click第二次点击后如何销毁cookie
【发布时间】：2020-02-02 01:52:32
【问题描述】：

我在 cookie 中存储了一个按钮颜色，这样如果按钮单击 css 颜色在页面刷新后保持不变，但我不知道如何在第二次单击后销毁 cookie 所以如果用户再次单击按钮颜色变回原来的，我用jquery cookie插件

jquery：

var color = Cookies.get('color')
console.log(color)

if(color)
    $('.likes-button').addClass(color)
Cookies.remove('color')

$('.likes-button').click(function(){
    var csrftoken = $('[name="csrfmiddlewaretoken"]').val();
    var el= this;
    var ajaxdata = $(this).attr('data-id');
    var ajaxstring = $(this).attr('string');
    console.log(ajaxstring)

    $.ajax({
        type: "POST",
        url: '/ajax/upvote/',
        data: JSON.stringify({'product_id' : ajaxdata,'string': ajaxstring}),
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            "X-CSRFToken": csrftoken
        },
        success: function(response) {
            var up = response['likes']
            var string = response['string']
            console.log(string);
            console.log(up)
            $(el).find('.target').html(up);
            $(el).find('.string').html(string);
            $('.likes-button').toggleClass(color)
            Cookies.set('color', 'heart')
        }
    })
})

css

.heart i.fa-heart{
    color : #f44336
}

【问题讨论】：

标签： javascript jquery ajax jquery-cookie

【解决方案1】：

您可以添加一个 if 块来检查 cookie 是否已设置。如果 cookie 已经设置，则删除它，否则添加它。

例子：

if(Cookies.get('color')) {
 Cookies.remove('color');
} else {
 Cookies.set('color', 'heart');
}

完整代码

let color = Cookies.get("color");
if (color) {
  $(".likes-button").toggleClass(color);
}

$(document).ready(function() {
  $(".likes-button").click(function() {
    var csrftoken = $('[name="csrfmiddlewaretoken"]').val();
    var el = this;
    var ajaxdata = $(this).attr("data-id");
    var ajaxstring = $(this).attr("string");
    console.log(ajaxstring);

    $.ajax({
      type: "POST",
      url: "/ajax/upvote/",
      data: JSON.stringify({ product_id: ajaxdata, string: ajaxstring }),
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        "X-CSRFToken": csrftoken
      },

      success: function(response) {
        var up = response["likes"];
        var string = response["string"];
        console.log(string);
        console.log(up);
        $(el)
          .find(".target")
          .html(up);
        $(el)
          .find(".string")
          .html(string);
        if (Cookies.get("color")) {
          $(".likes-button").toggleClass(Cookies.get("color"));
          Cookies.remove("color");
        } else {
          Cookies.set("color", "heart");
          $(".likes-button").toggleClass("heart");
        }
      },
      error: function(rs, e) {
        alert(rs.responseText);
      }
    });
  });
});

【讨论】：

问题是我无法在ajax回调中设置cookie，所以你的解决方案不起作用，我不知道为什么？？
您是否尝试过更新的代码。控制台有什么错误吗？
是改了代码，控制台没有错误但是点击后颜色不显示了？？
请链接？？在哪里可以找到？？
codesandbox.io/s/…

【解决方案2】：

解决方案：感谢@Sohail

let color = Cookies.get("color");
if (color) {
$(".likes-button").toggleClass(color);
}

$(document).ready(function() {
      $('.likes-button').click(function(){
 var csrftoken = $('[name="csrfmiddlewaretoken"]').val();
 var el= this;
 var ajaxdata = $(this).attr('data-id');
 var ajaxstring = $(this).attr('string');
    console.log(ajaxstring)

      $.ajax({
               type: "POST",
               url: '/ajax/upvote/',
               data: JSON.stringify({'product_id' : ajaxdata,'string': ajaxstring}),
                headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                "X-CSRFToken": csrftoken
            },

               success: function(response) {
                var up = response['likes']
                var string = response['string']
                console.log(string);
                   console.log(up)
                       $(el).find('.target').html(up);
                        $(el).find('.string').html(string);
                    if (Cookies.get("color")) {
                    $(".likes-button").toggleClass(Cookies.get("color"));
                    Cookies.remove("color");
                    } else {
                    Cookies.set("color", "heart");
                    $(".likes-button").toggleClass("heart");
                    }


                },
                error: function(rs, e) {
                       alert(rs.responseText);
                }
          });
    })
    });

【讨论】：