title: Save Add/Remove Products to Compare with Jquery
body: <p>How to save selected items on this script to be avilable after refresh or change page? 
  (in answer; JSFiddle demo): <a href="https://stackoverflow.com/questions/20610967/add-remove-products-to-compare-with-jquery">Add/Remove Products to Compare with Jquery</a></p>
  
  <p>Edit:</p>
  
  <ol>
  <li><p>What would be better practice cookies vs session?</p></li>
  <li><p>I tried with cookies. I save all added items (id and image) to one cookie, and I manage only to delete all selected. How can I delete only one item from cookie?</p></li>
  </ol>
  
  <p>Code:</p>
  
  <pre><code> $("#compareContainerFill").append($.cookie("newLi"));
  
  $(".compare").click(function() {
  
      var id=$(this).find('#compareID').text(); 
  
      var image=$(this).find('#imageURL').text();
  
      var selected = getSelectedIds();
      if(selected.length == 4) return; // already 4 items added
      if(selected.indexOf(id) != -1) return; // item already added
  
      var newLi = $('&lt;div/&gt;', { 'class': 'box' })
         .append($('&lt;input type="hidden" value="'+id+'" name="compare_id['+id+']"/&gt;'))
         .append($('&lt;span/&gt;', { class: 'prod-id hidden', text: id }))
         .append($('&lt;a/&gt;', { href: '#', text: '' }).append($('&lt;img src="http://localhost/...imagelink"&gt;')))
         .appendTo('#compareContainerFill');
  
      $.cookie('newLi', (($.cookie("newLi") ? $.cookie("newLi") : '') + newLi.clone().wrap('&lt;div /&gt;').parent().html()), { expires: 1 });
  
  
  });
  
  $("#compareContainerFill").live("click", function() {
      $.removeCookie('newLi');
      $('.box').remove();
  });
  </code></pre>