How to call a jquery-cookie from anywhere in my website?

Question

I'm trying to make a wishlist system in my website. When a user clicks on the heart,the product is added to the wishlist. My problem is,when I navigate from a page to another the cookie becomes empty. Below is my code :

$(document).ready(function() {
  i = 1;
  if ($.cookie("wishlis") != null && i == 1) {
    var r = JSON.parse($.cookie("wishlis"));
    $(".wishlist").each(function() {

      if (r.indexOf($(this).data('id')) >= 0) {
        $(this).children('i').attr('class', 'fa fa-heart active-wishlist');
        i = 2;
      }
    });
    $('.count').text(r.length);
  }
});
$('.wishlist').on('click', function() {
  if ($.cookie("wishlis") == null) {
    var array = new Array();
    array.push($(this).data("id"));
    $.cookie("wishlis", "{ path: '/' }");
    $.cookie("wishlis", JSON.stringify(array), "{ path: 'http://tunicompare.tn' }");
    $(this).children('i').attr('class', 'fa fa-heart active-wishlist');


    $('.count').text("1");
  } else {
    var r = JSON.parse($.cookie("wishlis"));

    if ($(this).children('i').attr('class').indexOf('active-wishlist') >= 0) {
      $(this).children('i').attr('class', 'fa fa-heart');
      index = r.indexOf($(this).data("id"));

      if (index > -1) {
        r.splice(index, 1);

      }
      $.cookie("wishlis", JSON.stringify(r));
      $('.count').text(r.length);

    } else {
      if (r.indexOf($(this).data("id")) == -1) {
        r.push($(this).data("id"));
        $.cookie("wishlis", JSON.stringify(r));
        $(this).children('i').attr('class', 'fa fa-heart active-wishlist');
        var r = JSON.parse($.cookie("wishlis"));
        $('.count').text(r.length);
      }
    }
  }
});

Answer 1

I figured out that the issue with the wishlist not persisting across page navigation is due to incorrect usage of the jQuery cookie plugin:

$(document).ready(function() {
  if ($.cookie("wishlist") != null) {
    var wishlist = JSON.parse($.cookie("wishlist"));
    $(".wishlist").each(function() {
      if (wishlist.indexOf($(this).data('id')) >= 0) {
        $(this).children('i').attr('class', 'fa fa-heart active-wishlist');
      }
    });
    $('.count').text(wishlist.length);
  }
});

$('.wishlist').on('click', function() {
  var wishlist = [];
  if ($.cookie("wishlist") != null) {
    wishlist = JSON.parse($.cookie("wishlist"));
  }

  var productId = $(this).data("id");
  var heartIcon = $(this).children('i');

  if (heartIcon.hasClass('active-wishlist')) {
    // Remove from wishlist
    var index = wishlist.indexOf(productId);
    if (index > -1) {
      wishlist.splice(index, 1);
    }
    heartIcon.attr('class', 'fa fa-heart');
  } else {
    // Add to wishlist
    if (wishlist.indexOf(productId) == -1) {
      wishlist.push(productId);
      heartIcon.attr('class', 'fa fa-heart active-wishlist');
    }
  }

  $.cookie("wishlist", JSON.stringify(wishlist), { path: '/' });
  $('.count').text(wishlist.length);
});