title: jQuery based Guest Wishlist
body: <p>I have created a jQuery based guest wish list. </p>
  
  <p>It has the following features:</p>
  
  <ol>
  <li>Add item to the list</li>
  <li>Remove item from the list</li>
  <li>Rel time update on amount of products added</li>
  </ol>
  
  <p>My problem is that once I refresh the page all of the items disappear. I did read that the way to overcome this is to use localStorage. </p>
  
  <p>Due to the fact that I create a dynamic array I am not sure how I can store and retrieve the data back into the panel.</p>
  
  <p>Link to my working JSFiddle can be found here: <a href="https://jsfiddle.net/ypujmpnj/" rel="nofollow noreferrer">https://jsfiddle.net/ypujmpnj/</a>
  The jQuery code is attached below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var wish_list = new Array();
  
  
  
  $(document).ready(function() {
    $(".wishlist").on("click", function() {
      $data = "";
      $product_id = $(this).attr("product_id");
      a
      $product_name = $(this).attr("product_name");
      $prduct_price = $(this).attr("product_price");
      //check if the element is in the array
      if ($.inArray($product_id, wish_list) == -1) {
        $product_str = "&lt;tr class='wishlist-item' id='list_id_" + $product_id + "'&gt;&lt;td class='w-pname'&gt;" + $product_name + "&lt;/td&gt;&lt;td class='w-price'&gt;$ " + $prduct_price + "&lt;/td&gt;&lt;td class='w-premove' wpid='" + $product_id + "'&gt;x&lt;/td&gt;&lt;/tr&gt;";
        $("#wish_list_item").append($product_str);
        wish_list.push($product_str);
        show_message("Product " + $product_name + " added");
        count_items_in_wishlist_update();
  
      }
  
    });
  
    //adding toggle functionality to the wishlist pannel
    $(".wish_list_heading").on("click", function() {
      if (!$(this).hasClass("up")) {
        $("#wish_list").css("height", "300px");
        $(this).addClass("up");
        $("#wish_list").css("overflow", "auto");
      } else {
        $("#wish_list").css("height", "30px");
        $(this).removeClass("up");
        $("#wish_list").css("overflow", "hidden");
      }
  
    });
  
    $("#wish_list_item").on("click", ".w-premove", function() {
      $product_id = $(this).attr("wpid");
      $("#list_id_" + $product_id).remove();
  
  
  
      wish_list = $.grep(wish_list, function(n, i) {
        return n != $product_id;
      });
      show_message("Product removed");
      count_items_in_wishlist_update();
    });
  });
  
  function show_message($msg) {
    $("#msg").html($msg);
    $top = Math.max(0, (($(window).height() - $("#msg").outerHeight()) / 2) + $(window).scrollTop()) + "px";
    $left = Math.max(0, (($(window).width() - $("#msg").outerWidth()) / 2) + $(window).scrollLeft()) + "px";
    $("#msg").css("left", $left);
    $("#msg").animate({
      opacity: 0.6,
      top: $top
    }, 400, function() {
      $(this).css({
        'opacity': 1
      });
    }).show();
    setTimeout(function() {
      $("#msg").animate({
        opacity: 0.6,
        top: "0px"
      }, 400, function() {
        $(this).hide();
      });
    }, 1000);
  }
  
  //Validation against the amount of product being added
  function count_items_in_wishlist_update() {
    $("#listitem").html(wish_list.length);
    if (wish_list.length &gt; 1) {
      $("#p_label").html("Products");
    } else {
      $("#p_label").html("Product");
    }
  }</code></pre>
  </div>
  </div>
  </p>