Tutorial Cookie JavaScript: Cara Mengatur, Mengambil, dan Mengelola Cookie dengan Aman

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Pengantar

Dalam pengembangan web menggunakan JavaScript, cookies banyak digunakan sebagai mekanisme penting untuk menyimpan informasi terkait pengguna.
Misalnya, cookies sering digunakan untuk mempertahankan sesi login atau menyimpan data keranjang belanja, yang secara signifikan meningkatkan kenyamanan pengguna.

Namun, bagi pemula, konsep seperti “Apa itu cookie?” atau “Bagaimana cookies dapat dimanipulasi dengan JavaScript?” bisa sulit dipahami.

Dalam artikel ini, kami memberikan penjelasan mendetail tentang penanganan cookie JavaScript, mulai dari konsep dasar hingga penggunaan lanjutan.
Dengan contoh kode praktis, panduan ini dirancang untuk berguna bagi pemula maupun pengembang tingkat menengah.

2. Apa Itu Cookie?

Konsep Dasar Cookies

Cookie adalah potongan data kecil yang disimpan di browser web.
Ini terutama digunakan untuk tujuan berikut:

• Menyimpan informasi yang dimasukkan oleh pengguna di situs web (misalnya, kredensial login).
• Merekam perilaku pengunjung untuk tujuan pemasaran dan analitik.
• Mempertahankan pengaturan konfigurasi (misalnya, preferensi bahasa atau pengaturan tema) untuk meningkatkan pengalaman pengguna.

Cara Kerja Cookies

Cookies terdiri dari pasangan kunci-nilai dan disimpan dalam format berikut:

name=value; expires=Wed, 31 Dec 2025 23:59:59 GMT; path=/

Dalam contoh ini, kunci name diberi nilai value, beserta tanggal kedaluwarsa dan jalur yang ditentukan.

Komponen Utama Cookie

1. Nama dan Nilai (name=value) – Informasi dasar cookie.
2. Kedaluwarsa (expires atau max-age) – Menentukan berapa lama cookie tetap berlaku.
3. Jalur – Mendefinisikan direktori atau halaman di mana cookie dapat diakses.
4. Atribut Secure – Memastikan cookie hanya dikirim melalui koneksi HTTPS.
5. Atribut SameSite – Membantu melindungi dari serangan permintaan lintas situs.

Pengaturan fleksibel ini membuat cookies berguna untuk meningkatkan pengalaman pengguna sambil memperkuat keamanan.

3. Operasi Dasar Cookie di JavaScript

Di JavaScript, cookies dimanipulasi menggunakan properti document.cookie.
Bagian ini memperkenalkan operasi dasar.

Mengatur Cookie

Berikut adalah contoh cara membuat cookie baru.

document.cookie = "username=John; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";

Poin Kunci:

• username=John : Menentukan kunci dan nilai.
• expires : Mengatur tanggal kedaluwarsa. Jika diabaikan, cookie akan dihapus saat browser ditutup.
• path=/ : Membuat cookie tersedia di seluruh situs.

Mendapatkan Cookies

Semua cookies dapat diambil sebagai berikut:

console.log(document.cookie);

Contoh output:

username=John; theme=dark; lang=ja

Karena beberapa cookies dipisahkan oleh titik koma (;), Anda perlu memisahkan string saat memproses nilai individual.

Menghapus Cookie

Untuk menghapus cookie, atur tanggal kedaluwarsanya ke tanggal masa lalu.

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

Kode ini menghapus cookie bernama username.

4. Pengaturan Atribut Cookie

Atribut cookie memainkan peran penting dalam keamanan dan pengendalian kedaluwarsa.

Mengatur Kedaluwarsa

1. Menggunakan atribut expires (berbasis tanggal)

   document.cookie = "username=John; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";
   

2. Menggunakan atribut max-age (berbasis detik)

   document.cookie = "username=John; max-age=3600; path=/";
   

Konfigurasi ini secara otomatis menghapus cookie setelah satu jam.

Atribut Keamanan

1. Atribut secure (hanya HTTPS)

   document.cookie = "username=John; secure";
   

2. Atribut SameSite (perlindungan permintaan lintas situs)

   document.cookie = "username=John; SameSite=Strict";
   

Dengan mengonfigurasi atribut ini dengan benar, Anda dapat secara signifikan meningkatkan keamanan dan perlindungan privasi.

5. Contoh Kode Praktis

Menghitung Kunjungan Pengguna

function getCookie(name) {
  let cookies = document.cookie.split('; ');
  for (let i = 0; i < cookies.length; i++) {
    let parts = cookies[i].split('=');
    if (parts[0] === name) return parts[1];
  }
  return null;
}

function setCookie(name, value, days) {
  let expires = "";
  if (days) {
    let date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + value + expires + "; path=/";
}

let visits = getCookie("visits") ? parseInt(getCookie("visits")) : 0;
visits++;
setCookie("visits", visits, 365);
alert("Your number of visits: " + visits);

Kode ini menyimpan jumlah kunjungan pengguna dalam cookie dan memperbarui hitungan pada setiap kunjungan.

6. Menggunakan Perpustakaan Pihak Ketiga

Meskipun cookie dapat dikelola menggunakan properti document.cookie dalam JavaScript, menangani string dan mengatur atribut dapat menjadi merepotkan. Hal ini sering menghasilkan kode yang lebih panjang dan mengurangi keterbacaan.

Untuk menyederhanakan manajemen cookie, menggunakan perpustakaan pihak ketiga adalah pendekatan yang umum dan efektif. Pada bagian ini, kami fokus pada salah satu perpustakaan paling populer: js-cookie.

1. Apa Itu Perpustakaan js-cookie?

js-cookie adalah perpustakaan JavaScript ringan yang menyederhanakan operasi cookie. Fitur utamanya meliputi:

• Simple API : Dengan mudah mengatur, mengambil, dan menghapus cookie.
• Ekstensibilitas dan fleksibilitas : Mendukung opsi keamanan dan konfigurasi khusus.
• Ringan : Hanya sekitar 2 KB setelah diminifikasi.

2. Menginstal js-cookie

Memuat via CDN

Tambahkan kode berikut di dalam tag <head> file HTML Anda.

<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>

Menginstal via npm atau yarn

Jika Anda mengelola dependensi dalam proyek Anda, gunakan salah satu perintah berikut:

npm install js-cookie

atau

yarn add js-cookie

3. Penggunaan Dasar

Mengatur Cookie

Cookies.set('username', 'John', { expires: 7 }); // Valid for 7 days

Mengambil Cookie

let username = Cookies.get('username');
console.log(username); // Output: John

Menghapus Cookie

Cookies.remove('username');

4. Pengaturan Opsi Lanjutan

Mengatur kedaluwarsa dan path

Cookies.set('session', 'active', { expires: 1, path: '/' });

• expires : Kedaluwarsa setelah 1 hari.
• path : Membuat cookie tersedia di seluruh situs.

Menambahkan atribut secure

Cookies.set('secureData', 'secret', { secure: true });

• secure: true : Mengirim cookie hanya melalui HTTPS.

Menentukan atribut SameSite

Cookies.set('strictCookie', 'value', { sameSite: 'Strict' });

• sameSite: ‘Strict’ : Memblokir permintaan lintas situs dan meningkatkan keamanan.

7. Pertimbangan Keamanan dan Privasi

Saat bekerja dengan cookie dalam JavaScript, langkah keamanan dan perlindungan privasi sangat penting. Penanganan yang tidak tepat dapat menyebabkan kebocoran data atau akses tidak sah. Bagian ini menjelaskan praktik terbaik untuk manajemen cookie yang aman.

1. Langkah Keamanan

Menggunakan HTTPS dan Atribut Secure

Atur atribut Secure sehingga cookie hanya dikirim melalui koneksi HTTPS. Ini membantu mencegah intersepsi data dan manipulasi.

Contoh:

document.cookie = "sessionID=abc123; Secure";

Saat menggunakan perpustakaan pihak ketiga js-cookie, Anda dapat mengkonfigurasikannya sebagai berikut:

Cookies.set('sessionID', 'abc123', { secure: true });

Menggunakan Atribut HttpOnly (Konfigurasi Server-Side)

JavaScript tidak dapat mengatur atribut HttpOnly di sisi klien. Namun, mengkonfigurasi atribut ini di sisi server membantu mencegah serangan XSS (Cross-Site Scripting).

Contoh: Konfigurasi sisi server (PHP)

setcookie('sessionID', 'abc123', [
    'httponly' => true,
    'secure' => true,
    'samesite' => 'Strict'
]);

Mencegah Serangan CSRF dengan Atribut SameSite

Untuk mencegah CSRF (Cross-Site Request Forgery),
konfigurasikan atribut SameSite.

Contoh:

document.cookie = "token=secureToken; SameSite=Strict";

2. Perlindungan Privasi

Batasi Jenis Informasi yang Disimpan

Hindari menyimpan informasi pribadi atau sensitif (seperti kata sandi) dalam cookie.
Sebagai gantinya, simpan pengidentifikasi anonim seperti ID sesi dan validasi di sisi server.

Contoh: Menggunakan ID sesi

Cookies.set('sessionID', 'randomString123', { secure: true, httpOnly: true });

Kepatuhan terhadap GDPR dan Regulasi Privasi

Karena regulasi seperti GDPR (General Data Protection Regulation) di UE
dan Undang-Undang Perlindungan Informasi Pribadi Jepang,
persyaratan berikut berlaku saat menggunakan cookie:

1. Persetujuan pengguna wajib Pengguna harus diberi informasi tentang tujuan penggunaan cookie dan memberikan persetujuan eksplisit.
2. Menyediakan opsi opt‑in dan opt‑out Pengguna harus dapat menolak cookie yang tidak penting.

Contoh: Banner persetujuan cookie (JavaScript)

if (!Cookies.get('cookieConsent')) {
  let consent = confirm('This site uses cookies. Do you allow cookies?');
  if (consent) {
    Cookies.set('cookieConsent', 'true', { expires: 365 });
  }
}

8. Cara Memeriksa Cookie di Browser Anda

Saat mengatur, mengambil, atau menghapus cookie dengan JavaScript,
Anda dapat memverifikasi perilakunya menggunakan alat pengembang browser.
Bagian ini menjelaskan cara memeriksa cookie di browser utama.

1. Memeriksa Cookie di Google Chrome

Membuka Alat Pengembang

1. Klik kanan pada halaman dan pilih “Inspect” atau “Inspect Element”.
2. Atau tekan F12 atau Ctrl + Shift + I (di Mac: Cmd + Opt + I).

Langkah-langkah untuk Melihat Cookie

1. Pilih tab “Application” di alat pengembang.
2. Dari menu kiri, klik “Storage” → “Cookies”.
3. Pilih domain target dari daftar.

Melihat Detail Cookie

Cookie untuk situs yang dipilih ditampilkan dalam format tabel.
Setiap kolom mewakili informasi berikut:

Mengedit dan Menghapus Cookie

• Edit: Klik dua kali pada baris untuk mengubah nilainya.
• Delete: Pilih baris dan tekan tombol Delete, atau klik kanan dan pilih Delete.

2. Memeriksa Cookie di Firefox

Membuka Alat Pengembang

1. Klik kanan pada halaman dan pilih “Inspect”.
2. Atau tekan F12 atau Ctrl + Shift + I.

Melihat Cookie

1. Pilih tab “Storage”.
2. Klik “Cookies” dari menu kiri.
3. Pilih situs target dari domain yang ditampilkan.

Mengedit dan Menghapus

Seperti di Chrome, Anda dapat langsung mengedit nilai atau menghapus cookie.

3. Memeriksa Cookie di Safari (untuk Pengguna Mac)

Mengaktifkan Alat Pengembang

1. Buka “Settings” dari menu Safari.
2. Pilih tab “Advanced” dan centang “Show Develop menu in menu bar”.

Membuka Alat Pengembang

1. Klik kanan pada halaman dan pilih “Inspect Element”.
2. Atau tekan Cmd + Opt + I.

Melihat Cookie

1. Pilih tab “Storage”.
2. Pilih “Cookies” untuk meninjau isinya.

4. Memeriksa Cookie melalui Konsol

Cookie juga dapat diperiksa menggunakan konsol JavaScript.

Contoh: Menampilkan semua cookie

console.log(document.cookie);

Contoh: Mengambil cookie tertentu

let cookies = document.cookie.split('; ');
let username = cookies.find(row => row.startsWith('username=')).split('=')[1];
console.log(username);

Cookie juga dapat ditambahkan atau dihapus langsung dari konsol.

9. Ringkasan

Dalam bagian sebelumnya, kami telah membahas penanganan cookie di JavaScript
dari konsep dasar hingga kasus penggunaan lanjutan.
Bagian ini meninjau poin-poin kunci dan merangkum praktik terbaik praktis.

1. Dasar Cookie dan Cara Kerjanya

Cookie adalah mekanisme untuk menyimpan potongan data kecil di browser web.

• Kasus penggunaan : Mempertahankan sesi login, mengelola preferensi pengguna, dan melacak perilaku.
• Komponen : Pasangan kunci-nilai, pengaturan kedaluwarsa, path, domain, dan atribut keamanan.

Memahami dasar-dasar ini memungkinkan Anda untuk menyesuaikan cookie secara fleksibel ke berbagai skenario.

2. Operasi Cookie di JavaScript

Di JavaScript, Anda dapat dengan mudah mengatur, mengambil, dan menghapus cookie menggunakan
properti document.cookie.

Contoh: Mengatur cookie

document.cookie = "username=John; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";

Contoh: Mengambil cookie

console.log(document.cookie);

Contoh: Menghapus cookie

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

Contoh-contoh ini mencakup dasar-dasar, tetapi untuk persyaratan yang lebih kompleks,
menggunakan pustaka pihak ketiga direkomendasikan.

3. Menggunakan Pustaka Pihak Ketiga

Pustaka membuat pengelolaan cookie menjadi jauh lebih mudah dan lebih mudah dibaca.

Contoh menggunakan js-cookie

Cookies.set('username', 'John', { expires: 7, secure: true });
let username = Cookies.get('username');
Cookies.remove('username');

Keuntungan:

• Kode yang pendek dan intuitif.
• Konfigurasi mudah untuk atribut keamanan dan opsi.
• Kompatibilitas lintas browser yang lancar.

4. Langkah-langkah Keamanan dan Privasi

Cookie harus selalu digunakan dengan pengaturan
keamanan yang tepat dan perlindungan privasi.

Praktik keamanan kunci

1. Gunakan HTTPS dan atribut Secure : Mencegah penyadapan data.
2. Atur atribut SameSite : Melindungi dari serangan CSRF.
3. Gunakan atribut HttpOnly : Mengurangi serangan XSS (konfigurasi sisi server).

Praktik privasi kunci

1. Jangan simpan informasi pribadi : Simpan hanya ID atau token dan kelola data aktual di server.
2. Patuhi peraturan : Terapkan manajemen persetujuan sesuai dengan GDPR dan undang-undang terkait.
3. Enkripsi data sensitif : Selalu enkripsi informasi kritis sebelum penyimpanan.

5. Verifikasi dan Debugging Cookie

Menggunakan alat pengembang membantu Anda memverifikasi dan mendebug perilaku cookie secara efisien.

Alat khusus browser

• Google Chrome : Antarmuka yang sangat fungsional dan ramah pengguna.
• Firefox : Fitur manajemen penyimpanan lanjutan.
• Edge dan Safari : Dikelola menggunakan langkah-langkah serupa dengan Chrome.

Menggunakan konsol JavaScript

console.log(document.cookie);

Ini memungkinkan pengujian dan debugging cepat.

6. Praktik Terbaik Praktis

Berikut adalah rekomendasi konkret untuk pengelolaan cookie yang aman dan efisien:

1. Simpan hanya data minimum yang diperlukan Hindari cookie yang tidak perlu dan kelola data kritis di server.
2. Atur periode kedaluwarsa yang tepat Gunakan waktu kedaluwarsa pendek dan hapus cookie yang tidak digunakan.
3. Perkuat pengaturan keamanan Selalu konfigurasikan atribut Secure, HttpOnly, dan SameSite.
4. Dapatkan persetujuan pengguna Terapkan spanduk persetujuan yang sesuai dengan GDPR dan peraturan privasi lainnya.
5. Gunakan alat debugging secara efektif Periksa cookie secara rutin menggunakan alat pengembang browser.
6. Manfaatkan pustaka pihak ketiga Gunakan pustaka seperti js-cookie untuk menyederhanakan pengelolaan dan meningkatkan keterbacaan.

Kesimpulan

Artikel ini memberikan gambaran komprehensif tentang pengelolaan cookie di JavaScript,
mencakup segala hal mulai dari penggunaan dasar hingga pertimbangan keamanan dan privasi.

Poin utama yang diambil

• Dasar-dasar cara kerja cookies dan kapan menggunakannya.
• Cara mengatur, mengambil, dan menghapus cookies menggunakan JavaScript.
• Pentingnya langkah-langkah keamanan dan kepatuhan hukum.
• Alur kerja efisien menggunakan alat pengembang dan pustaka pihak ketiga.

Langkah Selanjutnya
Gunakan panduan ini sebagai referensi untuk mengimplementasikan manajemen cookie dalam proyek dunia nyata.
Untuk tetap aman dan patuh terhadap undang-undang privasi yang terus berkembang,
pembelajaran berkelanjutan dan tinjauan rutin terhadap praktik terbaik sangat penting.

Terus memasukkan teknologi dan pengetahuan baru untuk membangun aplikasi web yang lebih aman,
dan ramah pengguna.