JSFiddle - React, Tailwind, and code Playground

by Jithin Raj P R

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="edgtf-pl-filter" data-filter="">
    <span>all</span>
  </li>
  <li class="edgtf-pl-filter" data-filter=".portfolio-category-1">
    <span>Categroy 1</span>
  </li>
  <li class="edgtf-pl-filter" data-filter=".portfolio-category-2">
    <span>Category 2</span>
  </li>
  <li class="edgtf-pl-filter" data-filter=".portfolio-category-3">
    <span>Category 3</span>
  </li>
  <li class="edgtf-pl-filter" data-filter=".portfolio-category-4">
    <span>Category 4</span>
  </li>
</ul>

JavaScript

/* on click do this */
$(".edgtf-pl-filter").click(function() {
  var isFilter = $(this).data("filter");
  localStorage.setItem('pod-filter', isFilter);
  alert(isFilter);
});


/* On page load, do this */

var isFilterRet = localStorage.getItem('pod-filter');
setTimeout(function() {
  $(".edgtf-pl-filter").each(function() {
    var atrFil = $(this).data("filter");
    if (atrFil == isFilterRet) {
      $(this).trigger('click');
    }
  });
}, 10);