Cookies JavaScript: Apa Itu ? Code dan Cara Membuatnya

Cookies memungkinkan kita menyimpan informasi pengguna di halaman web.

Apa itu Cookies?

Cookie adalah data, disimpan dalam file teks kecil, pada komputer.

Ketika server web telah mengirim halaman web ke browser, koneksi dimatikan, dan server melupakan segala tentang pengguna.

Cookie diciptakan untuk memecahkan masalah “bagaimana mengingat informasi tentang pengguna”:

• Saat pengguna mengunjungi halaman web, namanya dapat disimpan di cookie.
• Lain kali pengguna mengunjungi halaman, cookie “mengingat” namanya.

Cookie disimpan dalam pasangan nama-nilai seperti ini:

username = John Doe

Saat browser meminta halaman web dari server, cookie milik halaman ditambahkan ke permintaan. Dengan cara ini server mendapatkan data yang diperlukan untuk “mengingat” informasi tentang pengguna.

Tak satu pun dari contoh di bawah ini yang akan berfungsi jika browser Anda menonaktifkan dukungan cookie lokal.

Buat Cookie dengan JavaScript

JavaScript dapat membuat, membaca, dan menghapus cookie dengan properti document.cookie.

Dengan JavaScript, cookie dapat dibuat seperti ini:

document.cookie = "username=John Doe";

Anda juga dapat menambahkan tanggal kedaluwarsa (dalam waktu UTC). Secara default, cookie dihapus saat browser ditutup:

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";

Dengan parameter path, maka dapat memberi tahu browser dimana lokasi cookie tersebut. Secara default, cookie adalah milik halaman saat ini.

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

Baca Cookie dengan JavaScript

Dengan JavaScript, cookie dapat dibaca seperti ini:

var x = document.cookie;

document.cookie akan mengembalikan semua cookie dalam satu string seperti: cookie1 = value; cookie2 = nilai; cookie3 = nilai;

Ubah Cookie dengan JavaScript

Dengan JavaScript, Anda dapat mengubah cookie dengan cara yang sama seperti saat membuatnya.

document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

Cookie lama ditimpa.

Hapus Cookie dengan JavaScript

Menghapus cookie sangat mudah.

Anda tidak perlu menentukan nilai cookie saat menghapus cookie.

Cukup atur parameter kedaluwarsa ke tanggal yang lewat:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

Anda harus menentukan path cookie untuk memastikan bahwa anda menghapus cookie yang benar.

Beberapa browser tidak akan mengizinkan untuk menghapus cookie jika tidak menentukan jalurnya.

String Cookie

Properti document.cookie terlihat seperti string teks biasa. Tapi kenyataannya tidak.

Bahkan jika kita menulis seluruh string cookie ke document.cookie, ketika membacanya lagi, kita hanya dapat melihat pasangan nama-nilai.

Jika kita mengatur cookie baru, cookie lama tidak akan ditimpa. Cookie baru ditambahkan ke document.cookie, jadi jika membaca document.cookie lagi kita akan mendapatkan sesuatu seperti:

cookie1 = nilai; cookie2 = nilai;

Jika ingin menemukan nilai dari satu cookie yang ditentukan, maka harus menulis fungsi JavaScript yang mencari nilai cookie di string cookie.

Contoh Cookie JavaScript

Dalam contoh berikut, akan menunjukan cara membuat cookie yang menyimpan nama pengunjung.

Saat pertama kali pengunjung membuka halaman web, dia akan diminta untuk mengisi namanya. Nama tersebut kemudian disimpan dalam cookie.

Kali berikutnya pengunjung tiba di halaman yang sama, dia akan mendapatkan pesan selamat datang.

Sebagai contoh kita akan membuat 3 fungsi JavaScript:

1. Sebuah fungsi untuk mengatur nilai cookie
2. Sebuah fungsi untuk mendapatkan nilai cookie
3. Sebuah fungsi untuk memeriksa nilai cookie

Sebuah Fungsi untuk Mengatur Cookie

Pertama, kami membuat fungsi yang menyimpan nama pengunjung dalam variabel cookie:

function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

Fungsi Menjelaskan:

Parameter fungsi di atas adalah nama cookie (cname), nilai cookie (cvalue), dan jumlah hari hingga cookie harus kadaluwarsa (exdays).

Fungsi menetapkan cookie dengan menambahkan nama cookie, nilai cookie, dan string kedaluwarsa.

Fungsi untuk Mendapatkan Cookie

Kemudian membuat fungsi yang mengembalikan nilai cookie tertentu:

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

Fungsi menjelaskan:

Ambil nama cookie sebagai parameter (cname).

Buat variabel (nama) dengan teks yang akan dicari (cname + “=”).

Dekode string cookie, untuk menangani cookie dengan karakter khusus, mis. ‘$’

Pisahkan document.cookie pada titik koma menjadi larik yang disebut ca (ca = decodedCookie.split (‘;’)).

Ulangi melalui array ca (i = 0; i <ca.length; i ++), dan baca setiap nilai c = ca [i]).

Jika cookie ditemukan (c.indexOf (name) == 0), kembalikan nilai cookie (c.substring (name.length, c.length).

Jika cookie tidak ditemukan, kembalikan “”.

Sebuah Fungsi untuk Memeriksa Cookie

Terakhir membuat fungsi yang memeriksa apakah cookie telah diatur.

Jika cookie diatur maka akan muncul ucapan.

Jika cookie tidak disetel, maka akan menampilkan kotak prompt, menanyakan nama pengguna, dan menyimpan cookie nama pengguna selama 365 hari, dengan memanggil fungsi setCookie:

function checkCookie() {
  var username = getCookie("username");
  if (username != "") {
   alert("Welcome again " + username);
  } else {
    username = prompt("Please enter your name:", "");
    if (username != "" && username != null) {
      setCookie("username", username, 365);
    }
  }
}

Fungsi disatukan

<!DOCTYPE html>
<html>
<head>
<script>
function setCookie(cname,cvalue,exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires=" + d.toGMTString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

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

function checkCookie() {
  var user=getCookie("username");
  if (user != "") {
    alert("Welcome again " + user);
  } else {
     user = prompt("Please enter your name:","");
     if (user != "" && user != null) {
       setCookie("username", user, 30);
     }
  }
}
</script>
</head>

<body onload="checkCookie()"></body>

</html>

Contoh di atas menjalankan fungsi checkCookie() saat halaman dimuat.