JSFiddle - React, Tailwind, and code Playground

by RoryMcCrossan

HTML

<ul>
  <li>
    <div class="bookmark">Star</div>
  </li>
  <li>
    <div class="bookmark">Star</div>
  </li>
  <li>
    <div class="bookmark">Star</div>
  </li>
</ul>

CSS

.bookmarked {
  background: red;
}

JavaScript

$(".bookmark").each(function(i) {
  if (localStorage.getItem('bookmark-' + i)) {
    $(this).addClass('bookmarked');
  }
});

$('.bookmark').on('click', function(e) {
  let $this = $(this).toggleClass('bookmarked');
  if ($this.hasClass('bookmarked')) {
  	localStorage.setItem('bookmark-' + $(this).index('.bookmark'), 'bookmarked');
  } else {
  	localStorage.removeItem('bookmark-' + $(this).index('.bookmark'));
  }
});