如何在切换中删除 cookie 使用 js.cookie 和 jquery？答案

【问题标题】：How to remove cookie use js.cookie & jquery in toggles?如何在切换中删除 cookie 使用 js.cookie 和 jquery？
【发布时间】：2018-04-24 03:48:41
【问题描述】：

这是我的html代码：

<div class="accordion_container">
    <div class="accordion_head" node-tag="#1">First Accordian Head<span class="plusminus">+</span>
    </div>
    <div class="accordion_body">
        <p>First Accordian Body, it will have description</p>
    </div>
    <div class="accordion_head" node-tag="#2">Second Accordian Head<span class="plusminus">+</span>
    </div>
    <div class="accordion_body">
        <p>Second Accordian Body, it will have description</p>
    </div>
    <div class="accordion_head" node-tag="#3">Third Accordian Head<span class="plusminus">+</span>
    </div>
    <div class="accordion_body">
        <p>Third Accordian Body, it will have description</p>
    </div>
</div>

这是我的 js 脚本

$(document).ready(function () {
    //toggle the component with class accordion_body
    $(".accordion_head").click(function () {
        var tag = $(this).attr("node-tag");
        if ($(this).next(".accordion_body").is(':visible')) {
            $(this).next(".accordion_body").slideUp(300);
            $(this).next(".accordion_body").addClass("collapsed");
            Cookies.set('collapsed_Nodes', (Cookies.get('collapsed_Nodes') || '')+tag, { expires: 7, path: '' });
            $(this).children(".plusminus").text('+');
        } else {
            $(this).next(".accordion_body").slideDown(300);
            $(this).next(".accordion_body").addClass("expadned");
            Cookies.remove('collapsed_Nodes', (Cookies.remove('collapsed_Nodes') || '')+tag, { expires: 7, path: '' });
            $(this).children(".plusminus").text('-');
        }
    });
});

我的问题是，如果我点击折叠，它可以工作，但是当我点击扩展时，它无法从 cookie 中删除值，它只会将值添加到 cookie...

谁能帮我找出这个问题？

这里是js fiddle 链接

【问题讨论】：

我不太了解Cookies 对象的使用，但我有点困惑为什么你试图给 remove 方法赋值，而我认为它会只需完全删除 cookie。另外我很好奇是否可以通过再次设置 cookie 来实现相同的效果，只是过期时间为 0。
或者实际上，如果您想要做的是将标签从cookie中取出并留下其他标签，您是否不只是获取cookie，解析它，删除标签，然后设置cookie再次使用不包含标签的新值？
@MaxZoom 我修好了，你可以再试一次jsfiddle.net/carry0987/xpvt214o/170365
您是否只是尝试删除仅提供名称？像这样 'Cookies.remove('collapsed_Nodes');'
@MaxZoom 抱歉，我的回复晚了，Cookies.remove('collapsed_Nodes');只会删除整个 collapsed_Nodes cookie...

标签： jquery jquery-cookie

【解决方案1】：

您可以简单地从应该仍然存在的所有值重新构建它，而不是删除标签。这样每次都遵循相同的逻辑。

$(document).ready(function() {
  var $accordionHead = $(".accordion_head");

  //toggle the component with class accordion_body
  $accordionHead.on("click", function() {
    var $head = $(this);

    $head.toggleClass("collapsed");

    if ($head.is(".collapsed")) {
      $head.next(".accordion_body").slideUp(300);
    } else {
      $head.next(".accordion_body").slideDown(300);
    }

    var $collapsedHeads = $accordionHead.filter(".collapsed");
    
    Cookies.set(
      "collapsed_Nodes",
      $collapsedHeads.map(function(){ return this.getAttribute("node-tag"); }).get().join(''),
      {
        expires: 7,
        path: ''
      }
    );
  });
});

.accordion_container {
  width: 500px;
}

.accordion_head {
  background-color: skyblue;
  color: white;
  cursor: pointer;
  font-family: arial;
  font-size: 14px;
  margin: 0 0 1px 0;
  padding: 7px 11px;
  font-weight: bold;
}

.accordion_body {
  background: lightgray;
}

.accordion_body p {
  padding: 18px 5px;
  margin: 0px;
}

.plus,
.minus {
  float: right;
}

.collapsed .minus,
.plus {
  display: none;
}

.collapsed .plus {
  display: inherit;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.0/js.cookie.min.js"></script>

<div class="accordion_container">
  <div class="accordion_head" node-tag="#1">First Accordian Head<span class="plus">+</span><span class="minus">-</span>
  </div>
  <div class="accordion_body">
    <p>First Accordian Body, it will have description</p>
  </div>
  <div class="accordion_head" node-tag="#2">Second Accordian Head<span class="plus">+</span><span class="minus">-</span>
  </div>
  <div class="accordion_body">
    <p>Second Accordian Body, it will have description</p>
  </div>
  <div class="accordion_head" node-tag="#3">Third Accordian Head<span class="plus">+</span><span class="minus">-</span>
  </div>
  <div class="accordion_body">
    <p>Third Accordian Body, it will have description</p>
  </div>
</div>

【讨论】：

呃..它显示错误 { "message": "Script error.", "filename": "", "lineno": 0, "colno": 0 }
堆栈溢出具有在其网站上设置 cookie 的安全性。您必须在小提琴上尝试一下。
如何读取名为“collapsed_Nodes”的 cookie 的值并在其节点标签等于 collapsed_Nodes 时折叠元素？
可以保存到cookie，但是不能读取，刷新页面会打开所有元素..

【解决方案2】：

我已经为accordion_body 元素创建了一个基于hide 类的代码示例。
它不会读取 cookie 并为所选元素操作其值，而是始终根据隐藏的手风琴元素写入值。
当没有任何内容被隐藏时，它将完全删除 cookie。

$(document).ready(function() {
  //toggle the component with class accordion_body
  $(".accordion_head").click(function() {
    var tag = $(this).data("node-tag");
    if ($(this).next(".accordion_body").is(':visible')) {
      $(this).next(".accordion_body").slideUp(300);
      $(this).next(".accordion_body").addClass("hide");
      $(this).children(".plusminus").text('+');
    }
    else {
      $(this).next(".accordion_body").slideDown(300);
      $(this).next(".accordion_body").removeClass("hide");

      $(this).children(".plusminus").text('-');
    }
    adjustCookie();
  });

  var adjustCookie = function() {
    var tags = [];
    $('.accordion_container .hide').each(function() {
      var tag = $(this).prev('.accordion_head').data("node-tag");
      tags.push(tag.replace('#', ''));
    });

    if (tags.length) {
      Cookies.set('collapsed_Nodes', tags.join('|'), {
        expires: 7
      });
    } else {
      Cookies.remove('collapsed_Nodes');
    }
  }
});

.accordion_container {
  width: 500px;
}

.accordion_head {
  background-color: skyblue;
  color: white;
  cursor: pointer;
  font-family: arial;
  font-size: 14px;
  margin: 0 0 1px 0;
  padding: 7px 11px;
  font-weight: bold;
}

.accordion_body {
  background: lightgray;
}

.accordion_body p {
  padding: 18px 5px;
  margin: 0px;
}

.plusminus {
  float: right;
}

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>


<div class="accordion_container">
  <div class="accordion_head" data-node-tag="#1">First Accordian Head<span class="plusminus">-</span>
  </div>
  <div class="accordion_body">
    <p>First Accordian Body, it will have description</p>
  </div>
  <div class="accordion_head" data-node-tag="#2">Second Accordian Head<span class="plusminus">-</span>
  </div>
  <div class="accordion_body">
    <p>Second Accordian Body, it will have description</p>
  </div>
  <div class="accordion_head" data-node-tag="#3">Third Accordian Head<span class="plusminus">-</span>
  </div>
  <div class="accordion_body">
    <p>Third Accordian Body, it will have description</p>
  </div>
</div>

【讨论】：

它有效，但我不能给出两个答案......对不起，但你的答案实际上可以工作
附加说明：不要使用像node-tag 这样的非标准属性，因为某些浏览器可能根本不会呈现它们。而是按照官方specification使用data-node-tag
感谢您的推荐！我将其编辑为数据属性
请问如何读取cookie中的数组？现在它可以保存值但不能读取它，所以如果我刷新页面，所有元素都会打开..
你可以通过var b = Cookies.get('collapsed_Nodes');检索它如果它不存在打开所有手风琴元素，如果存在，用|字符var eles = b.split('|');分割cookie字符串

【解决方案3】：

根据documentation ，为了删除你只需要的coockie：

Cookies.remove('name');

你的情况是：

Cookies.remove('collapsed_Nodes');

【讨论】：

我认为它只会删除名为“collapsed_Nodes”的整个 cookie