Konfigurasi JavaScript Cookie

Tabel Konten
  1. Dasar Kerja 
  2. JavaScript Cookie 
    1. createCookie(name, value, days) 
    2. readCookie(name) 
    3. eraseCookie(name) 
  3. Kode Lengkap 
    1. jQuery 
    2. HTML 
    3. CSS 

Cookie sebenarnya hanyalah memori peramban yang tercipta untuk menyimpan data kecil berupa teks. Sekedar untuk memberikan indikasi apakah sesuatu harus diingat atau tidak. Memori ini digunakan untuk membuat peramban mengingat sesuatu saat mengunjungi situs yang pernah dia kunjungi. Satu contoh yang paling umum ada pada semua halaman login situs. Dalam halaman login tersebut biasanya terdapat pilihan Ingat saya? atau Remember me? atau Keep me logged in? seperti ini:

Formulir Login Facebook
Formulir Login Facebook

Saat Anda mengecek kotak centang tersebut sebelum melakukan login, maka setelah Anda melakukan login, dan kemudian Anda menutup peramban kemudian membukanya lagi, Anda tidak perlu melakukan login untuk yang ke dua kalinya karena peramban yang sedang Anda gunakan telah menyimpan data login Anda. Begitulah fungsi kuki secara umum (Sebenarnya Saya masih tidak begitu yakin apakah cara kerja ‘ingat Saya?’ pada aplikasi login informasi menggunakan sesuatu sesederhana kuki atau tidak. Mohon dikoreksi).

Saya berikan sebuah demo sederhana terlebih dahulu. Bukan demo formulir login akun (kuki login tidak dibuat begitu saja dengan JavaScript. Itu bisa mengancam keamanan akun), tapi konsep kotak dialog yang hanya akan tampil sekali saja:

Lihat Demo

Dasar Kerja 

  1. Dasar kerjanya adalah, saat sebuah halaman terbuka maka kotak dialog akan tampil.
  2. Saat Anda menutup kotak dialog tersebut, di balik itu sebenarnya Anda juga telah menciptakan kuki untuk mengingat sesi penutupan kotak dialog.
  3. Setelah kuki kotak dialog tersimpan, maka saat peramban memuat ulang halaman tersebut dia akan secara otomatis membaca kuki terkait yang telah tersimpan kemudian memutuskan untuk melakukan sesuatu terhadap data yang berhasil dibaca tersebut.

Berikut ini adalah fungsi JavaScript Cookie yang Saya dapatkan dari QuirksMode:

function createCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    } else {
        var expires = "";
    }
    document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name, "", -1);
}

Unduh/Pakai URL Ini

Hanya ada tiga fungsi yaitu createCookie(name, value, days), readCookie(name) dan eraseCookie(name).

createCookie digunakan untuk mencipatkan kuki bersamaan saat sebuah perintah dikerjakan (dalam demo kotak dialog, kuki dibuat saat tombol [×] diklik):

$('a.close').click(function() {
    $('#dialog').fadeOut();
    createCookie("hideDialog", "hide", 7000); // Membuat kuki...
});

hideDialog adalah nama kuki, hide adalah nilai kuki dan 7000 adalah masa kadaluarsa. Dalam fungsi di atas, kuki akan kadaluarsa setelah 7000 hari.

Nilai kuki sebenarnya bisa diabaikan dengan menuliskan nilai berupa null, jika yang kita inginkan hanya mengingat sesi yang terjadi. Tapi jika kuki yang akan kita tampilkan/tugaskan lebih spesifik (nama orang misalnya) maka nilai kuki akan bermanfaat. Sebagai contoh, jika peramban Anda telah menyimpan kuki yang diciptakan dari ini:

createCookie("Nama", "Taufik Nurrohman", 30);

Maka Anda bisa menampilkan nilai kuki tersebut dengan menuliskan ini:

if(readCookie("Nama")) {
    alert(readCookie("Nama"));
}

Kode di atas akan menampilkan kotak pesan peringatan bertuliskan Taufik Nurrohman.

Anda sudah mengeklik tombol penutup kotak dialog. Kuki hideDialog sudah tersimpan. Tugas selanjutnya hanyalah menciptakan kondisi untuk memerintahkan peramban melakukan sesuatu saat kuki hideDialog terbaca. Ini bisa dilakukan dengan menuliskan fungsi readCookie dalam kondisi:

if(readCookie("hideDialog")) {
    $('#dialog').remove(); // Hilangkan kotak dialog saat kuki 'hideDialog' terbaca
}

Kode di atas Saya rasa cukup jelas. Saat kuki hideDialog terbaca maka kotak dialog akan dihilangkan. Itulah sebabnya kenapa kotak dialog hanya tampil sekali saja.

eraseCookie tidak memiliki keistimewaan apapun. Ini hanyalah fungsi sederhana untuk menghapus kuki melalui dokumen HTML:

<button onclick='eraseCookie("hideDialog");'>Hapus Kuki</button>

Tombol di atas akan menghapus kuki penutupan kotak dialog saat diklik. Hal ini tidak jauh berbeda seperti halnya saat kita menghapus kuki secara manual melalui histori peramban:

Menghapus kuki melalui histori peramban
Menghapus kuki melalui histori peramban

Kode Lengkap 

jQuery 

$(function() {

    // Tampilkan kotak dialog saat halaman telah termuat
    $(window).load(function() {
        $('#dialog').animate({top:($(window).height()/2)-20}, 400, "swing");
    });

    // Saat tombol tutup diklik, sembunyikan kotak dialog dengan efek .fedeOut()
    // dan buat kuki dengan nama "hideDialog" dengan waktu kadaluarsa 7000 hari
    $('a.close').click(function() {
        $(this).parent().fadeOut('fast');
        createCookie("hideDialog", "hide", 7000);
        return false;
    });

    // Digunakan saat kuki sudah tercipta
    // Saat kuki "hideDialog" terbaca, singkirkan kotak dialog
    if(readCookie("hideDialog")) {
        $('#dialog').remove();
    }

});

HTML 

<div id='dialog'>
    Lorem ipsum dolor sit amet.
    <a class='close' href='#'>&#215;</a>
</div>

CSS 

#dialog {
  background-color:#ffa500;
  border:5px solid #222;
  box-shadow:0px 1px 3px black;
  position:absolute;
  top:-100px;
  left:50%;
  z-index:999;
  width:260px;
  height:140px;
  margin:-70px 0px 0px -150px;
  padding:15px;
  color:white;
}

a.close {
  color:white;
  font:bold 16px Arial,Sans-Serif;
  text-decoration:none;
  position:absolute;
  top:10px;
  right:14px;
}

20 Komentar

  • Unknown

    Ini mas yang saya maksud dulu, ketika sebuah kotak dialog (fanpage facebook like, subscribe dsb) meuncul hanya saat pengunjung membuka blog, dan tidak akan muncul lagi ketika pengunjung pindah halaman.

  • Unknown

    tapi kok nggak jalan ya? :)

  • Taufik Nurrohman

    @Miftah Rahman JavaScript cookie-nya sudah dipasang? Kode yang Saya tuliskan pertama kali, harus dipasang dulu sebelum kode kesimpulan di bawahnya.

  • Klik Template

    Maaf sbelumnya bang taufik, ini kunjungan awwal di blog anda.

    Apa kegunaan jika javascript ini kita massukkan dalam javascript yg kita passang diblog, dan cara mengatasinya bagaimana?

    Trims atas jawabannya.... :-bd :-bd :-bd

    • Taufik Nurrohman

      Keuntungannya tidak ada. Kalau JavaScript ini dipasang tapi fungsinya tidak dimanfaatkan, hasilnya tidak akan memberikan efek apa-apa.

  • yudhaardiansyah

    kita juga punya nih artikel mengenai java script, berikut linknya semoga bermanfaat ya :D
    http://repository.gunadarma.ac.id/bitstream/123456789/2371/1/02-02-011.pdf

  • Unknown

    sangat manfaat sekali klw buat warning adult content

    terimakasih buat scriptnya mas taufiq,,sudah di terapkan di blog dewasa saya :D

    cuma ada pertanyaan nih mas,,,
    bisa nga klw yg load pertama kali itu warningnya,,,jadi tidak usah tunggu load blog selesai, takut keintip isinya klw yg klik bukan semestinya

    ini contohnya mas _contoh008.blogspot . com

    • Taufik Nurrohman

      Buang saja kode $(window).load(function() { ... }); dari lingkup animasi kotak dialog:

      $(function() {
      $('#dialog').animate({top:($(window).height()/2)-20}, 400, "swing");
      $('a.close').click(function() {
      $(this).parent().fadeOut('fast');
      createCookie("hideDialog", "hide", 7000);
      return false;
      });
      if(readCookie("hideDialog")) {
      $('#dialog').remove();
      }
      });
      • Unknown

        makasi udah bisa master,,udah aman deh sekarang :D

  • Unknown

    bos, ajarin aku cookie donk bos., dari kemarin mau nyimpan background lewat cookie gak bisa-bisa.. :D

  • Unknown

    Mas ini kan kode kalau diterapkan dialog itu akan muncul satu kali saja, nah bagaimana kalau kita ingin 2 atau berapa kali dialog ini muncul.

    • Taufik Nurrohman

      Belajar dasarnya dulu...

      • you

        dasar-dasar belajar javascript itu yang pertama kali harus dimulai dari mana mas (bagian apa yang wajib difahami terlebih dahulu)?

        • Taufik Nurrohman

          Yang jelas harus tahu dulu mengenai cara meletakkan kode JavaScript pada tempat yang benar. Ini berlaku juga untuk memahami materi koding yang lain. Saya sering sekali mendapat pertanyaan-pertanyaan yang seragam mengenai mengapa skrip ini tidak bekerja, mengapa skrip itu tidak bekerja… padahal masalahnya biasanya cuma soal peletakkan kode yang tidak benar. Pelajari di sini ⇒ Memahami `DOMContentLoaded`

          Setelah itu, kita bisa memulai untuk memahami apa itu variabel ⇒ JavaScript Variabel

  • you

    Oo ternyata ada disini.. maaf mas ga lihat sitemapnya... terima kasih atas bantuannya

    • you

      Kalo digabungkan dengan ini gimana mas.. Elemen class .suka hanya terpanggil sekali dalam sehari $(document).ready(function(){
      setTimeout(function(){
      $('#pop').addClass('suka')
      },10000);

      setTimeout(function(){
      $('#pop').removeClass('suka');
      },15000);

      });

  • Unknown

    kalo untuk membuat cookie secara global gimana mas?
    misalnya gini:
    1. tipe gambar create cookies 3 hari
    2. tipe css dan js create cookies 7 hari
    hehe mudah2an bisa dimengerti

  • Sekedus

    Sangat bermanfaat :bd, sama seperti di stackoverflow
    Referensi dari w3schools

Komentar telah ditutup.