Konfigurasi JavaScript Cookie

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

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.

JavaScript Cookie

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(name, value, days)

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.

readCookie(name)

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(name)

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

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;
}