Recently Viewed Products with Shopify using localStorage.

handlebars-product-item.liquid

<div class="product-item__container">
{% raw %}
{{#unless productAvailable}}
  <span class="badge soldout">
    <span class="badge-label soldout">Sold out</span>
  </span>
{{/unless}}
{{#if onSale}}
  {{#unless soldOut}}
    <span class="badge onsale">
      <span class="badge-label onsale">On sale</span>
    </span>
  {{/unless}}
{{/if}}
  {{#if image }}
    <a href="{{ url }}" class="product-image__link">
      <img src="{{image}}" alt="{{title}}">
    </a>
  {{/if}}
  <div class="product-meta__container">
    <p class="product-title">
      <a href="{{ url }}">{{ title }}</a>
    </p>
    <p class="product-price">
      <span class="current-price">{{price}}</span>
      {{#if onSale}}
        <span class="old-price">{{compare_price}}</span>
      {{/if}}
    </p>
    <div class="product-review-stars star-rating" data-sku="{{firstSKU}}" title="0">

    </div>
  </div>
</div>
{% endraw %}

product.liquid

{% unless product == empty %}
  <script type="application/json" data-product-json>
    {{ product | json }}
  </script>
{% endunless %}

<script id="RecentProductItemScript" type="text/x-handlebars-template">
  {% include 'handlebars-product-grid-item' %}
</script>

recently-viewed.js

// Product Template must contain
//   {% unless product == empty %}
//     <script type="application/json" data-product-json>
//       {{ product | json }}
//     </script>
//   {% endunless %}


// Recently Viewed Products
  var productJson = JSON.parse(
    document.querySelector("[data-product-json]").innerHTML
  );
  console.dir(productJson);
  console.log("-----------------------------------");
  var storedProducts = JSON.parse(localStorage.getItem("storedProducts"));

  function addProductEntry() {

    if (storedProducts === null) storedProducts = [];
    var currentProductID = productJson.id;
    var currentProductHandle = productJson.handle;
    var product = {
      handle: currentProductHandle,
      id: currentProductID
    };
    if (JSON.parse(localStorage.getItem("product")) != currentProductHandle) {
      localStorage.setItem("product", JSON.stringify(product));
    }
    var productExists = false
    for (var i = storedProducts.length; i--;) {
      var curProduct = storedProducts[i];
      if (curProduct.handle === product.handle) {
        productExists = true;
        break;
      }
    }
    if (!productExists) {
      storedProducts.push(product);
    }
    if (localStorage.getItem(storedProducts)) {
      localStorage.getItem("storedProducts", JSON.stringify(storedProducts));
    } else {
      localStorage.setItem("storedProducts", JSON.stringify(storedProducts));
    }
  }


  var savedProductsArr = JSON.parse(localStorage.getItem("storedProducts"));
  var savedProductsArrReverse = savedProductsArr.reverse();
  var index = 0;
  if (savedProductsArr === null) {
    var elem = document.querySelector('#shopify-section-recently-viewed');
    elem.parentNode.removeChild(elem);
  } else {
    savedProductsArrReverse.some(function (product, index) {
      getStoredProducts(product);
      index++;
      return index === 4;
    });
  }
  var source = document.getElementById("RecentProductItemScript").innerHTML;

  function getStoredProducts(product) {
    var productAjaxURL = "/products/" + product.handle + ".js";
    $.ajax({
      type: 'GET',
      dataType: 'json',
      url: productAjaxURL,
      success: function (data) {
        console.dir(data);
        var template = Handlebars.compile(source);
        var soldOut = false;
        var onSale = false;
        if (data.available === false) {
          var soldOut = true;
        };
        if (data.compare_at_price > data.price) {
          var onSale = true;
        };
        var context = {
          title: data.title,
          url: data.url,
          image: slate.Image.getSizedImageUrl(data.featured_image, '450x450'),
          compare_price: slate.Currency.formatMoney(data.compare_at_price, theme.moneyFormat),
          price: slate.Currency.formatMoney(data.price, theme.moneyFormat),
          firstSKU: data.variants[0].sku,
          productAvailable: data.available,
          soldOut: soldOut,
          onSale: onSale
        };
        var html = template(context);
        $(html).appendTo("#recentlyViewedGrid");
        productStars();
      },
      error: function (data, error) {
        console.dir(data);
      }
    });

    // List of all entries
    //  console.log(localStorage.getItem("storedProducts"));
    // Last entry inserted
    //  console.log(localStorage.getItem("product"));

  }
  addProductEntry();