Mengenal Cookie
Data yang dibuat oleh website saat seorang pengunjung mengunjungi website tersebut dan menyimpannya dalam bentuk file teks pada komputer si pengunjung, itulah cookie.
Data yang dibuat oleh website ini biasanya adalah sebuah pengaturan tertentu atau bisa juga berupa informasi pribadi kita seperti nama, telepon, dan sebagainya yang biasa kita jumpai ketika mengisi form biodata di beberapa website. Namun perlu diingat bahwa data tersebut hanya akan didapat website ketika kita menyetujui atau memberikan informasi tersebut.
Fungsi Cookie
Seperti yang sudah saya paparkan sebelumnya pada prolog artikel ini yaitu tentang pengertian cookie. Maka dari pengertian tersebut kita dapat menarik kesimpulan bahwa cookie dapat mengidentifikasi dan menyimpan informasi seorang pengunjung yang mengunjungi suatu website. Sehingga ketika si pengunjung kembali ke website tersebut, website akan mengenali si pengunjung.
Sebagai contoh ketika sobat hendak masuk ke akun email sobat misalnya, maka sobat akan dimintai username dan password akun. setelah sobat mengisinya, barulah sobat akan dibawa masuk ke akun email sobat tersebut. Kemudian ketika sobat menutup browser dan membuka kembali email sobat, maka secara otomatis sobat akan masuk ke akun email sobat tanpa perlu mengisikan username dan password lagi.
Bagi sobat yang memiliki website atau blog, cookie dapat digunakan untuk beberapa keperluan. Misal, sobat ingin membuat kotak dialog yang hanya tampil sekali untuk setiap pengunjung yang mengunjungi website sobat. Maka dengan cookie hal tersebut dapat dilakukan. Cookie juga memungkinkan kita untuk membuat pengaturan font, merubah tema, dsb.
Dasar Javascript Cookie
Javascript cookie adalah pembuatan cookie dengan menggunakan javascript. sebelum saya membahas cara pembuatan cookie dengan fungsi javascript, alangkah baiknya jika kita memahami dulu document.cookie.
Cookie terdiri dari :
- Nama dan Isi
- Waktu Berakhir
- Domain dan Path
Kurang lebih strukturnya seperti ini :
namacookie=isicookie; expires=Sun, 1 Jan 9999 00:00:00 GMT; path=/
Nama/isi, waktu berakhir, dan path cookie tersebut dapat kita tentukan sendiri. Biasanya jika hanya untuk mengingat sebuah fungsi, isi cookie dapat dibiarkan kosong. Namun jika kita memerlukan sesuatu yang lebih spesifik, misalnya membedakan pengunjung maka isi cookie diperlukan.
Jika ada lebih dari satu cookie maka kita pisahkan dengan tanda "; "(titik koma dan spasi), jadinya akan seperti ini :
namacookie1=isicookie1; namacookie2=isicookie2
Dasar Membuat Cookie
//Pembuatan cookie biasa
document.cookie = "namacookie=isicookie";
//Pembuatan cookie dengan menetapkan batas waktu akhir
document.cookie = "namacookie=isicookie; expires=Sun, 1 Jan 9999 00:00:00 GMT";
Dasar Membaca Cookie
var semuaCookie = document.cookie;
Dasar Merubah Isi Cookie
document.cookie = "namacookie=isicookie";
//misalkan, menjadi :
document.cookie = "namacookie=cookievalue";
Dasar Menghapus Cookie
document.cookie = "namacookie=isicookie";
//menjadi :
document.cookie = "namacookie=cookievalue; expires=Sun, 1 Jan 2000 00:00:00 GMT";
Sampai disini saya anggap sobat sudah memahami pengertian, fungsi, dan dasar-dasar javascript cookie. Kita beralih ke bagian selanjutnya, yang mana bagian ini adalah inti dari artikel kali ini.
Javascript Cookie
Javascript cookie ini hanya terdiri dari 3 fungsi, yaitu fungsi untuk membuat(createCookie), membaca(readCookie), dan menghapus(eraseCookie). Lihatlah kode berikut :
- Uncompressed
- Compressed
<script type="text/javascript">
//<![CDATA[
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);
}
//]]>
</script>
Untuk menerapkannya di blog sobat, Silahkan copy kode diatas ke html template sobat. Letakkan disebelum </head> atau disetelah <body>. Jika sudah, kita lanjutkan ke cara menjalankannya.
Membuat Cookie
Untuk membuat cookie kita tinggal menjalankan fungsi createCookie, caranya seperti ini :
createCookie(namacookie, isicookie, hari);
Namacookie berarti adalah nama dari cookie yang akan kita buat. Namacookie ini berupa string(teks), jadi letakan namacookienya didalam tanda kutip sehingga menjadi "namacookie". Lalu isicookie dapat dikosongkan dengan menuliskan null jika tidak diperlukan. Namun apabila diperlukan maka isilah isicookie-nya(bisa berupa string ataupun integer). Untuk hari maka isi dengan berapa hari, misal 10 hari maka tuliskan saja 10.
Kurang lebih jadinya akan seperti ini :
createCookie("contoh", null, 10);
Membaca Cookie
Sama halnya membuat cookie, Untuk membaca cookie yang tadi dibuat kita tinggal menjalankan fungsi readCookienya, seperti ini :
readCookie(namacookie);
Menghapus Cookie
Dan yang terakhir, untuk menghapus cookie yang tadi dibuat. Jalankan fungsi eraseCookie, lihat dibawah ini :
eraseCookie(namacookie);
Demo
Supaya tambah jelas lagi saya sudah siapkan demonya untuk menjalankan ketiga fungsi tersebut, silahkan sobat lihat dibawah ini :
Penjelasan demo diatas :
Tombol change background akan mengubah warna background menjadi gelap sekaligus menjalankan fungsi createCookie. Fungsi readCookie akan dijalankan ketika di re-run, inilah alasan kenapa background tidak kembali jadi cerah. Tombol reset background akan menghapus cookie yang tadi dibuat, sehingga ketika dire-run lagi background akan jadi cerah lagi.
Sekian artikel tentang Cookie ini. Jika ada kesalahan atau kekurangan mohon kritik dan sarannya.
Sumber :