Lewati ke konten utama
menjadi.dev
Chapter 4.1 Data & Storage Menengah

Cookie: Token Pengenal Web

Cara kerja cookie, atribut keamanan, dan privasi

Tujuan Pembelajaran

  • Memahami cara kerja cookie dan atribut pentingnya
  • Mengerti perbedaan cookie, localStorage, dan sessionStorage

Analogi

Diagram 

      Cookie = Kartu Member Gym:

[Kamu masuk] → [Kasih kartu #12345]
[Datang lagi] → [Tunjukkan #12345]
[Kasir cek] → 'Oh, Budi, membership aktif!'

Cookie seperti kartu member — browser bawa setiap kali visit

Penjelasan Konsep

Kalau HTML adalah kerangka rumah dan CSS adalah dekorasi interior,

JavaScript (JS)

JavaScript (JS) adalah sistem saraf dan kelistrikan yang membuat rumah menjadi hidup dan interaktif. Dengan JavaScript, lampu bisa menyala saat kamu masuk ruangan, pintu garasi terbuka otomatis saat kamu pulang, termostat menyesuaikan suhu sesuai preferensimu, dan sistem keamanan mengenali wajahmu.

Tanpa JavaScript, website adalah patung — indah dilihat tapi tidak bisa berinteraksi.

Dengan JavaScript, website menjadi makhluk hidup yang merespons setiap sentuhan, klik,

Dan gerakan mouse-mu.

Apa itu JavaScript?

JavaScript adalah bahasa pemrograman yang berjalan di browser (client-side) untuk membuat halaman web menjadi interaktif.

Dibuat oleh Brendan Eich dalam waktu 10 hari pada tahun 1995 (betul, cuma 10 hari!), JavaScript awalnya hanya untuk hal-hal sederhana seperti validasi form dan animasi kecil.

Tapi sekarang?

JavaScript adalah bahasa pemrograman paling populer di dunia — digunakan di front-end (React, Vue, Angular), back-end (Node.js),

Mobile (React Native), desktop (Electron), dan bahkan IoT!

Apa yang bisa dilakukan JavaScript di browser?

1. Memanipulasi DOM (Document Object Model) — JavaScript bisa membaca, mengubah, menambah, dan menghapus elemen HTML secara dinamis.

Tombol like di Instagram?

Itu JS menambah angka dan mengubah warna ikon. Chat yang muncul real-time? Itu JS menambah elemen pesan baru ke DOM.

Menangani Event

JavaScript bisa merespons aksi user: klik, hover, scroll, ketik keyboard, submit form, resize window, dan puluhan event lainnya.

Setiap kali kamu berinteraksi dengan website, ada JavaScript yang “mendengarkan” dan merespons.

Validasi Form

Sebelum data dikirim ke server, JavaScript bisa memeriksa apakah input valid — email punya @, password cukup panjang, field tidak kosong. Ini menghemat waktu user dan mengurangi beban server.

Komunikasi dengan Server (AJAX/Fetch)

JavaScript bisa mengambil data dari server tanpa me-refresh halaman.

Ini adalah teknologi di balik infinite scroll, live search, dan aplikasi single-page (SPA) seperti Gmail.

Animasi dan Efek Visual

Dari efek hover sederhana sampai animasi kompleks, game 2D/3D, dan visualisasi data interaktif.

Cara Menyambungkan JS ke HTML

Inline

Langsung di atribut HTML (hindari!): <button onclick="alert('Halo!')">Klik</button>

Internal

Di dalam tag <script> di HTML: <script> console.log('Halo'); </script>

3. External (REKOMENDASI) — File .js terpisah:

<script src="script.js"></script>

Letakkan tag <script> sebelum penutup </body> agar HTML diparse dulu sebelum JS berjalan.

Alternatif: gunakan defer attribute di <head>: <script src="app.js" defer></script>

Variabel dan Tipe Data

JavaScript punya 3 cara mendeklarasikan variabel:

  • let — Variabel yang bisa diubah nilainya (rekomendasi utama)
  • const — Variabel yang tidak bisa diubah (konstan)
  • var — Cara lama,

Punya masalah scope (hindari!)

Tipe data utama:

  • string — Teks: “Hello World”
  • number — Angka: 42, 3.14, -100
  • boolean — true atau false
  • null — Nilai sengaja dikosongkan
  • undefined — Variabel belum diberi nilai
  • object — Kumpulan data (objek, array, function)

JavaScript adalah loosely typed — kamu tidak perlu menyebutkan tipe data saat membuat variabel.

Tipe data ditentukan otomatis dari nilai yang diberikan.

Kenapa JavaScript penting?

Karena JavaScript adalah satu-satunya bahasa yang bisa berjalan di browser secara native.

HTML dan CSS tidak bisa “berpikir” atau membuat keputusan — mereka hanya menampilkan informasi.

JavaScript memberikan inteligensi pada website: logika, kondisi, perulangan, kalkulasi, dan interaktivitas. Tanpa JavaScript, web modern tidak akan ada.

Contoh Kode

javascript 
// SET COOKIE
document.cookie = 'username=Budi';
document.cookie = 'token=abc123; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/';

// BACA COOKIE
console.log(document.cookie);

// Parse cookie
const parseCookie = () => {
  return document.cookie.split(';').reduce((acc, c) => {
    const [k, v] = c.trim().split('=');
    acc[k] = decodeURIComponent(v);
    return acc;
  }, {});
};

// localStorage & sessionStorage
localStorage.setItem('theme', 'dark');
localStorage.setItem('user', JSON.stringify({ id: 1, name: 'Budi' }));
const user = JSON.parse(localStorage.getItem('user'));
sessionStorage.setItem('tempData', 'sementara');

Penjelasan Kode

Baris 2-3: Set cookie. Baris 6-12: Parse cookie. Baris 15-18: localStorage. Baris 19: sessionStorage.

Prompt AI

Jelaskan kenapa cookie HttpOnly lebih aman. Apa serangan XSS?

Pertanyaan Reflektif

Buka DevTools → Application → Cookies. Lihat cookie website yang sedang kamu buka.