Cookies Overview

Siti berhasil masuk ke akunnya di toko Budi. Server mengenali sesi itu, tetapi muncul pertanyaan berikutnya: bagaimana server tahu bahwa setiap permintaan berikutnya masih dari Siti? Web Storage dari chapter sebelumnya tidak bisa menjawab — data di localStorage tidak pernah ikut terkirim ke server. Untuk kebutuhan ini browser menyediakan mekanisme tertua di web: cookie, potongan data kecil yang disimpan browser dan dikirim otomatis pada setiap permintaan ke situs asalnya.

Dari JavaScript, cookie dikelola lewat properti document.cookie. Properti ini terkenal paling ganjil di seluruh DOM — ia terlihat seperti string biasa, tetapi menulis dan membacanya berperilaku berbeda dari properti lain. Chapter ini membahas cara menulis, membaca, dan menghapus cookie, beserta atribut-atribut yang mengatur masa simpan, jalur, dan keamanannya.

Menulis, Membaca, dan Menghapus #

Aturan menulisnya satu baris penugasan: document.cookie = "nama=nilai; atribut". Meskipun bentuknya seperti penugasan string biasa, penugasan tersebut tidak menimpa seluruh isi cookie — ia menambah atau memperbarui satu cookie saja. Berkas berikut mencoba ketiga operasinya:

// preferensi-cookie.js — menulis, membaca, dan menghapus cookie

// --- 1. menulis cookie: pasangan "nama=nilai" plus atributnya ---
document.cookie = "kupon=DISKON20; expires=Fri, 01 Jan 2038 00:00:00 GMT; path=/";
document.cookie = "tema=gelap; expires=Fri, 01 Jan 2038 00:00:00 GMT; path=/";

console.log("document.cookie:", document.cookie);

// --- 2. membaca satu nilai: string gabungan harus dipecah manual ---
function bacaCookie(nama) {
  for (const bagian of document.cookie.split("; ")) {
    const [kunci, nilai] = bagian.split("=");
    if (kunci === nama) return nilai;
  }
  return null;
}

console.log("kupon :", bacaCookie("kupon"));
console.log("tema  :", bacaCookie("tema"));
console.log("absen :", bacaCookie("langganan"));

// --- 3. menghapus cookie: ditimpa dengan tanggal kedaluwarsa yang sudah lewat ---
document.cookie = "tema=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
console.log("setelah hapus  :", document.cookie);
console.log("baca 'tema'    :", bacaCookie("tema"));

Keluaran berikut dicatat dari eksekusi nyata berkas ini di lingkungan DOM jsdom; console browser menghasilkan deretan yang sama:

Output yang Dihasilkan (console browser):

document.cookie: kupon=DISKON20; tema=gelap
kupon : DISKON20
tema  : gelap
absen : null
setelah hapus  : kupon=DISKON20
baca 'tema'    : null

Mari kita telaah baris-baris pentingnya:

1. Baris 4–5 (dua penugasan document.cookie): setiap penugasan menulis satu cookie dengan format "nama=nilai" diikuti atribut dipisah titik koma. Atribut expires menetapkan tanggal kedaluwarsa sehingga cookie bertahan setelah browser ditutup; tanpa atribut ini cookie bersifat sesi dan hilang saat browser ditutup.
2. Baris 7 (membaca document.cookie): pembacaan menghasilkan satu string berisi seluruh cookie yang berlaku untuk halaman ini, berformat nama1=nilai1; nama2=nilai2. Perhatikan bahwa atribut seperti expires dan path tidak ikut tampil — pembacaan hanya memuat nama dan nilai.
3. Baris 10–16 (function bacaCookie): karena tidak ada method bawaan untuk membaca satu nama, kita memecah string sendiri: split("; ") memisahkan tiap cookie, lalu split("=") memisahkan nama dari nilai. Kunci yang dicari dan tidak ditemukan menghasilkan null.
4. Baris 23 (menghapus cookie): tidak ada perintah hapus. Cookie dihapus dengan menimpanya memakai nama dan path yang sama, tetapi expires diarahkan ke tanggal yang sudah lewat — browser langsung membuangnya. Keluaran terakhir memperlihatkan tema sudah tidak ada, sementara kupon tetap bertahan.

Atribut yang Mengatur Perilaku Cookie #

Setiap penulisan cookie bisa menyertakan atribut tambahan setelah pasangan nama=nilai. Atribut inilah yang menentukan kapan dan di mana cookie berlaku:

Dua atribut terakhir berkaitan dengan keamanan dan perlu dipahami dari sudut pandang JavaScript. Atribut Secure memastikan cookie tidak pernah berpindah melalui koneksi tanpa enkripsi. Atribut HttpOnly bekerja dengan cara yang lebih radikal: cookie yang ditandai demikian tidak akan pernah muncul di document.cookie, sekalipun ditulis oleh server. Ini memang disengaja — cookie sesi login sebaiknya tidak bisa dibaca script apa pun, sehingga upaya pembacaan lewat XSS menjadi tidak berguna. Bila cookie sesi login tidak terlihat dari JavaScript, itu justru tandanya proteksinya bekerja, bukan kerusakan.

Batasan yang Menentukan Kapan Cookie Dipakai #

Cookie punya tiga batasan yang membedakannya dari Web Storage. Pertama, ukuran: satu cookie dibatasi sekitar 4 KB dan jumlah cookie per domain juga dibatasi, sehingga tidak cocok untuk data berjumlot besar. Kedua, cookie ikut dikirim pada setiap permintaan ke situsnya — termasuk permintaan gambar dan skrip — sehingga menumpuk cookie berarti menambah beban setiap komunikasi. Ketiga, antarmuka document.cookie hanya berupa string tanpa method bantu, seperti kita lihat pada parsing manual di atas.

Karena itu pembagiannya jelas: cookie untuk data kecil yang memang perlu diketahui server — penanda sesi, preferensi bahasa — dan Web Storage untuk data yang hanya diatur di browser. Chapter ini fokus pada sisi JavaScript-nya; sisi server (cara cookie ditetapkan lewat header Set-Cookie) berada di ranah materi backend dan tidak kita bahas di sini. Untuk sisi keamanan script, section Security melanjutkan pembahasan Secure, HttpOnly, dan SameSite dalam konteks proteksi XSS.

// preferensi-cookie.js — menulis, membaca, dan menghapus cookie

// --- 1. menulis cookie: pasangan "nama=nilai" plus atributnya ---
document.cookie = "kupon=DISKON20; expires=Fri, 01 Jan 2038 00:00:00 GMT; path=/";
document.cookie = "tema=gelap; expires=Fri, 01 Jan 2038 00:00:00 GMT; path=/";

console.log("document.cookie:", document.cookie);

// --- 2. membaca satu nilai: string gabungan harus dipecah manual ---
function bacaCookie(nama) {
  for (const bagian of document.cookie.split("; ")) {
    const [kunci, nilai] = bagian.split("=");
    if (kunci === nama) return nilai;
  }
  return null;
}

console.log("kupon :", bacaCookie("kupon"));
console.log("tema  :", bacaCookie("tema"));
console.log("absen :", bacaCookie("langganan"));

// --- 3. menghapus cookie: ditimpa dengan tanggal kedaluwarsa yang sudah lewat ---
document.cookie = "tema=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
console.log("setelah hapus  :", document.cookie);
console.log("baca 'tema'    :", bacaCookie("tema"));