Cookie bekerjsama hanyalah memori peramban yang tercipta untuk menyimpan data kecil berupa teks. Sekedar untuk memperlihatkan indikasi apakah sesuatu harus diingat atau tidak. Memori ini dipakai untuk membuat peramban mengingat sesuatu ketika mengunjungi situs yang pernah ia kunjungi. Satu teladan 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? menyerupai ini:
Saat Anda mengecek kotak centang tersebut sebelum melaksanakan login, maka sesudah Anda melaksanakan login, dan kemudian Anda menutup peramban kemudian membukanya lagi, Anda tidak perlu melaksanakan login untuk yang ke dua kalinya lantaran 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 warta memakai sesuatu sesederhana kuki atau tidak. Mohon dikoreksi).
Saya berikan sebuah demo sederhana terlebih dahulu. Bukan demo formulir login akun (kuki login tidak dibentuk begitu saja dengan JavaScript. Itu sanggup mengancam keamanan akun), tapi konsep kotak obrolan yang hanya akan tampil sekali saja:
Dasar Kerja
- Dasar kerjanya adalah, ketika sebuah halaman terbuka maka kotak obrolan akan tampil.
- Saat Anda menutup kotak obrolan tersebut, di balik itu bekerjsama Anda juga telah membuat kuki untuk mengingat sesi penutupan kotak dialog.
- Setelah kuki kotak obrolan tersimpan, maka ketika peramban memuat ulang halaman tersebut ia akan secara otomatis membaca kuki terkait yang telah tersimpan kemudian tetapkan untuk melaksanakan sesuatu terhadap data yang berhasil dibaca tersebut.
JavaScript Cookie
Berikut ini yakni 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); }Hanya ada tiga fungsi yaitu createCookie(name, value, days), readCookie(name) dan eraseCookie(name).
createCookie(name, value, days)
createCookie dipakai untuk mencipatkan kuki bersamaan ketika sebuah perintah dikerjakan (dalam demo kotak dialog, kuki dibentuk ketika tombol [×] diklik):
$('a.close').click(function() { $('#dialog').fadeOut(); createCookie("hideDialog", "hide", 7000); // Membuat kuki... });hideDialog yakni nama kuki, hide yakni nilai kuki dan 7000 yakni masa kadaluarsa. Dalam fungsi di atas, kuki akan kadaluarsa sesudah 7000 hari.
Nilai kuki bekerjsama sanggup diabaikan dengan menuliskan nilai berupa null, kalau yang kita inginkan hanya mengingat sesi yang terjadi. Tapi kalau kuki yang akan kita tampilkan/tugaskan lebih spesifik (nama orang misalnya) maka nilai kuki akan bermanfaat. Sebagai contoh, kalau peramban Anda telah menyimpan kuki yang diciptakan dari ini:
createCookie("Nama", "Taufik Nurrohman", 30);Maka Anda sanggup 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 epilog kotak dialog. Kuki hideDialog sudah tersimpan. Tugas selanjutnya hanyalah membuat kondisi untuk memerintahkan peramban melaksanakan sesuatu ketika kuki hideDialog terbaca. Ini sanggup dilakukan dengan menuliskan fungsi readCookie dalam kondisi:
if(readCookie("hideDialog")) { $('#dialog').remove(); // Hilangkan kotak obrolan ketika kuki 'hideDialog' terbaca }Kode di atas Saya rasa cukup jelas. Saat kuki hideDialog terbaca maka kotak obrolan akan dihilangkan. Itulah sebabnya kenapa kotak obrolan hanya tampil sekali saja.
eraseCookie(name)
eraseCookie tidak mempunyai 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 obrolan ketika diklik. Hal ini tidak jauh berbeda menyerupai halnya ketika kita menghapus kuki secara manual melalui histori peramban:
Kode Lengkap
jQuery
$(function() { // Tampilkan kotak obrolan ketika halaman telah termuat $(window).load(function() { $('#dialog').animate({top:($(window).height()/2)-20}, 400, "swing"); }); // Saat tombol tutup diklik, sembunyikan kotak obrolan dengan pengaruh .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 ketika kuki sudah tercipta // Saat kuki "hideDialog" terbaca, singkirkan kotak obrolan if(readCookie("hideDialog")) { $('#dialog').remove(); } });HTML
<div id='dialog'> Lorem ipsum dolor sit amet. <a class='close' href='#'>×</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; }