Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

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

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 20 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!