Membuat tombol bookmark dipostingan - Dayat

Sebelum memulai, pastikan untuk memasang script di artikel berikut.

Baca juga: Manipulasi Data menggunakan localStorage dan sessionStorage

Pertama tambahkan tombol button agar berfungsi untuk menambahkan item kedalam bookmark.

<button class='addBookmark' data-id='1' data-title='Demonic Emperor' data-label='Fantasy, Cultivation'>Bookmark</button>

Bagian yang ditandai wajib ada. Berikut penjelasannya.

• class untuk menandakan bahwa ini tombol bookmark.
• data-id, data-title, data-label ini merupakan data yang akan di simpan ke dalam bookmark.

Kedua tambahkan HTML untuk menampilkan daftar bookmark yang tersimpan. Bookmark yang tersimpan akan di tampilkan didalam tag berikut.

<ul id='hasil'></ul>

Ketiga pasang script berikut diatas tag </body>

<script type="text/javascript">/*<![CDATA[*/
  !function(){let e=document.querySelectorAll(".addBookmark"),t=document.getElementById("hasil"),a=new StorageManipulation("book");function i(){let e=a.get(),i="";e.length>0&&e.forEach(e=>{i+="<li><p>"+e.title+"</p>",i+="<p>"+e.label+"</p></li>"}),t&&(t.innerHTML=i)}e.length>0&&e.forEach(e=>{let t=e.dataset.title,l=e.dataset.id,d=e.dataset.label;a.find("id",l).item&&(e.innerText="Bookmarked",e.classList.add("active")),i(),e.addEventListener("click",()=>{e.classList.contains("active")?(a.delete("id",l),e.innerText="Bookmark",e.classList.remove("active")):(a.add({id:l,title:t,label:d}),e.innerText="Bookmarked",e.classList.add("active")),i()})})}();
/*]]>*/</script>

Demo di Codepen

Bagi yang ingin memahami kode diatas silahkan bertanya dikomentar. Maaf aku gk ahli dalam menjelaskan script secara langsung dalam postingan.

Berikut script yang tidak di minify.

(function () {
  let buttonBookmark = document.querySelectorAll('.addBookmark'),
    hasil = document.getElementById('hasil'),
    book = new StorageManipulation('book');

  function generateBookmark() {
    let items = book.get(),
      html = '';

    items.length > 0 && items.forEach(data => {
      html += '<li><p>' + data.title + '</p>';
      html += '<p>' + data.label + '</p></li>';
    });

    hasil && (hasil.innerHTML = html);
  };


  buttonBookmark.length > 0 && buttonBookmark.forEach(button => {
    let title = button.dataset.title,
      id = button.dataset.id,
      label = button.dataset.label,
      checkItem = book.find('id', id);

    if (checkItem.item) {
      button.innerText = 'Bookmarked';
      button.classList.add('active');
    };

    generateBookmark();

    button.addEventListener('click', () => {
      let checkClass = button.classList.contains('active');

      if (checkClass) {
        book.delete('id', id);
        button.innerText = 'Bookmark';
        button.classList.remove('active');
      } else {
        book.add({
          'id': id,
          'title': title,
          'label': label
        });
        button.innerText = 'Bookmarked';
        button.classList.add('active');
      }

      generateBookmark();
    });
  });
})();