带有 toggleClass 的 Cookie 存储

Question

我的网站上有 cookie，所以每当用户点击“书签”时，这将添加“书签”类，这只会使它变成不同的颜色。

有人可以告诉我哪里出错了吗？我希望每当用户刷新页面时，它只是将类添加到他们之前单击的 .bookmark 类中。

另外，我希望如果他们单击“已添加书签”的类，然后删除它的 cookie。因为他们不想再为此添加书签了。

HTML

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.3/js.cookie.js"></script>

<ul>
    <li><div class="bookmark">Star</div></li>
    <li><div class="bookmark">Star</div></li>
    <li><div class="bookmark">Star</div></li>   
</ul>

CSS

<style>.bookmarked {background:red;}</style>

jQuery

 <script>
 $(".bookmark").each(function () {
     if (Cookies.get($(this))) {$(this).addClass('bookmarked');}
 });

$('.bookmark').on('click', function (e) {
    e.preventDefault();
    $(this).toggleClass('bookmarked');
    Cookies.set('bookmark-' + $('.bookmark').index(this), 'bookmarked', { expires: 365 });
});
</script>

Answer 1

首先，注意你在cookie的get()方法中使用$(this)是不正确的。您需要使用.bookmark 元素的索引，该索引可以通过提供给each() 的第一个参数来检索。

$(".bookmark").each(function(i) {
  if (Cookies.get('bookmark-' + i)) {
    $(this).addClass('bookmarked');
  }
});

$('.bookmark').on('click', function(e) {
  $(this).toggleClass('bookmarked');
  Cookies.set('bookmark-' + $(this).index('.bookmark'), 'bookmarked', {
    expires: 365
  });
});

话虽如此，您使用的 cookie 库似乎不再有效。在所有其他情况下，您都在关注 documentation they provide 并且没有创建任何 cookie。即使是基本的Cookies.add('foo', 'bar') 也无济于事。

作为一种解决方法，我建议您使用 localStorage 创建所需的功能：

$(".bookmark").each(function(i) {
  if (localStorage.getItem('bookmark-' + i)) {
    $(this).addClass('bookmarked');
  }
});

$('.bookmark').on('click', function(e) {
  let $this = $(this).toggleClass('bookmarked');
  if ($this.hasClass('bookmarked')) {
    localStorage.setItem('bookmark-' + $this.index('.bookmark'), 'bookmarked');
  } else {
    localStorage.removeItem('bookmark-' + $this.index('.bookmark'));
  }
});

Example jsFiddle