JavaScript dan Cookie

Articles

Artikel ini menjelaskan tentang JavaScript dan cookie.

Kami akan menjelaskan semua dengan hati-hati, langkah demi langkah, mulai dari dasar-dasar cookie, cara membaca dan menulis, keamanan, hingga contoh praktis.

YouTube Video

javascript-cookie.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8        box-sizing: border-box;
  9    }
 10
 11    body {
 12        margin: 0;
 13        padding: 1em;
 14        padding-bottom: 10em;
 15        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16        background-color: #f7f9fc;
 17        color: #333;
 18        line-height: 1.6;
 19    }
 20
 21    .container {
 22        max-width: 800px;
 23        margin: 0 auto;
 24        padding: 1em;
 25        background-color: #ffffff;
 26        border: 1px solid #ccc;
 27        border-radius: 10px;
 28        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29    }
 30
 31    .container-flex {
 32        display: flex;
 33        flex-wrap: wrap;
 34        gap: 2em;
 35        max-width: 1000px;
 36        margin: 0 auto;
 37        padding: 1em;
 38        background-color: #ffffff;
 39        border: 1px solid #ccc;
 40        border-radius: 10px;
 41        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 42    }
 43
 44    .left-column, .right-column {
 45        flex: 1 1 200px;
 46        min-width: 200px;
 47    }
 48
 49    h1, h2 {
 50        font-size: 1.2rem;
 51        color: #007bff;
 52        margin-top: 0.5em;
 53        margin-bottom: 0.5em;
 54        border-left: 5px solid #007bff;
 55        padding-left: 0.6em;
 56        background-color: #e9f2ff;
 57    }
 58
 59    button {
 60        display: block;
 61        margin: 1em auto;
 62        padding: 0.75em 1.5em;
 63        font-size: 1rem;
 64        background-color: #007bff;
 65        color: white;
 66        border: none;
 67        border-radius: 6px;
 68        cursor: pointer;
 69        transition: background-color 0.3s ease;
 70    }
 71
 72    button:hover {
 73        background-color: #0056b3;
 74    }
 75
 76    #output {
 77        margin-top: 1em;
 78        background-color: #1e1e1e;
 79        color: #0f0;
 80        padding: 1em;
 81        border-radius: 8px;
 82        min-height: 200px;
 83        font-family: Consolas, monospace;
 84        font-size: 0.95rem;
 85        overflow-y: auto;
 86        white-space: pre-wrap;
 87    }
 88
 89    .highlight {
 90        outline: 3px solid #ffc107; /* yellow border */
 91        background-color: #fff8e1;  /* soft yellow background */
 92        transition: background-color 0.3s ease, outline 0.3s ease;
 93    }
 94
 95    .active {
 96        background-color: #28a745; /* green background */
 97        color: #fff;
 98        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 99        transition: background-color 0.3s ease, box-shadow 0.3s ease;
100    }
101  </style>
102</head>
103<body>
104    <div class="container">
105        <h1>JavaScript Console</h1>
106        <button id="executeBtn">Execute</button>
107        <div id="output"></div>
108    </div>
109
110    <script>
111        // Override console.log to display messages in the #output element
112        (function () {
113            // Override console.log
114            const originalLog = console.log;
115            console.log = function (...args) {
116                originalLog.apply(console, args);
117                const message = document.createElement('div');
118                message.textContent = args.map(String).join(' ');
119                output.appendChild(message);
120            };
121
122            // Override console.error
123            const originalError = console.error;
124            console.error = function (...args) {
125                originalError.apply(console, args);
126                const message = document.createElement('div');
127                message.textContent = args.map(String).join(' ');
128                message.style.color = 'red'; // Color error messages red
129                output.appendChild(message);
130            };
131        })();
132
133        document.getElementById('executeBtn').addEventListener('click', () => {
134            // Prevent multiple loads
135            if (document.getElementById('externalScript')) return;
136
137            const script = document.createElement('script');
138            script.src = 'javascript-cookie.js';
139            script.id = 'externalScript';
140            //script.onload = () => console.log('javascript-cookie.js loaded and executed.');
141            //script.onerror = () => console.log('Failed to load javascript-cookie.js.');
142            document.body.appendChild(script);
143        });
144    </script>
145</body>
146</html>

JavaScript dan Cookie

Cookie mengacu pada potongan kecil data yang disimpan di browser pengguna. Cookie terutama digunakan untuk tujuan-tujuan berikut:.

Otentikasi pengguna (mempertahankan status login)
Menyimpan pengaturan pengguna (bahasa, tema, dll.)
Pelacakan (riwayat penjelajahan, dll.)

Di JavaScript, Anda dapat membaca dan menulis cookie menggunakan document.cookie.

Membuat (menulis) cookie

Cookie dibuat dengan sintaks berikut:.

1document.cookie = "username=JohnDoe";

Kode ini menyimpan cookie dengan nama "username=JohnDoe" di browser.

Membuat cookie dengan tanggal kedaluwarsa

Cookie bisa diberi tanggal kedaluwarsa. Jika tanggal kedaluwarsa tidak diatur, cookie akan dianggap sebagai session cookie dan akan dihapus saat browser ditutup.

1const date = new Date();
2date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 days
3const cookieText = "username=JohnDoe; expires=" + date.toUTCString() + "; path=/; SameSite=None; Secure"
4document.cookie = cookieText;
5console.log(`Cookie Text  : ${cookieText}`);
6console.log(`Cookie Value : ${document.cookie}`);

Atribut expires menentukan tanggal kedaluwarsa cookie dalam format UTC.
Atribut path menentukan jalur di mana cookie akan dikirim. / berarti seluruh situs.
Jika Anda menentukan SameSite=None, Cookie akan dikirimkan bahkan untuk permintaan antar situs. Namun, dalam kasus ini, Anda harus selalu menyertakan atribut Secure.
Menentukan Secure membatasi Cookie hanya untuk komunikasi HTTPS, sehingga meningkatkan keamanan.
Dengan merujuk ke document.cookie, Anda dapat memperoleh semua Cookie yang tersedia di halaman saat ini dalam bentuk string.
Dengan menggunakan console.log, Anda dapat memeriksa perbedaan antara nilai Cookie yang sebenarnya diatur di browser dan nilai yang dapat diambil.

Mengambil (membaca) cookie

Anda dapat mengambil semua cookie sebagai string dengan document.cookie.

1const date = new Date();
2date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 days
3document.cookie = "theme=dark; expires=" + date.toUTCString() + "; path=/; SameSite=None; Secure"
4
5console.log(document.cookie);
6// Output: "username=JohnDoe; theme=dark"

Nilai yang dikembalikan oleh document.cookie adalah satu string di mana semua Cookie digabungkan dalam format 'key=value;'.
Sebaiknya gunakan fungsi untuk mengurai string ini dan mengambil nilai yang diinginkan.

Fungsi untuk mendapatkan nilai cookie

 1function getCookie(name) {
 2    const cookies = document.cookie.split('; ');
 3    for (const cookie of cookies) {
 4        const [key, value] = cookie.split('=');
 5        if (key === name) {
 6            return decodeURIComponent(value);
 7        }
 8    }
 9    return null;
10}
11
12console.log(getCookie("username")); // "JohnDoe"

Fungsi ini memisahkan kunci dan nilai menggunakan split() dan mengembalikan nilai jika sesuai dengan kunci yang ditentukan.
Dengan menggunakan decodeURIComponent, Anda dapat mengambil karakter yang dienkode dengan benar.
Jika kunci yang sesuai tidak ada, maka akan mengembalikan null.

Menghapus cookie

Cookie dapat dihapus dengan mengatur tanggal kedaluwarsanya ke tanggal yang sudah lewat.

1document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; SameSite=None; Secure";
2
3console.log(document.cookie);
4// Output: "theme=dark"

Dengan menetapkan nilai kosong pada username dan mengatur tanggal kedaluwarsa ke waktu yang telah lewat, Cookie akan dihapus.
Saat menghapus Cookie, Anda juga harus mencocokkan atribut path, SameSite, dan Secure dengan yang digunakan saat cookie dibuat.
Dalam contoh ini, username dihapus, dan Cookie lain seperti theme=dark tetap ada.

Opsi cookie

Anda dapat menentukan berbagai opsi untuk mengendalikan perilaku cookie. Opsi utama adalah sebagai berikut:.

Menentukan tanggal kedaluwarsa cookie dalam format UTC. Jika tidak ditentukan, cookie akan menjadi session cookie dan dihapus saat browser ditutup.

Menentukan tanggal kedaluwarsa cookie dalam satuan detik. Opsi ini memiliki prioritas lebih tinggi dibandingkan `expires`.

Menentukan jalur di mana cookie akan dikirim. Misalnya, jika Anda menentukan `/admin`, cookie hanya akan dikirim ke halaman di bawah jalur tersebut.

Menentukan domain tempat cookie berlaku. Biasanya diatur untuk domain saat ini, tetapi Anda bisa menerapkannya pada seluruh subdomain, seperti `.example.com`.

Jika atribut ini ditentukan, cookie hanya akan dikirim melalui HTTPS. Untuk meningkatkan keamanan, selalu atur atribut ini untuk informasi yang sensitif.

Mengontrol apakah cookie dikirim pada permintaan lintas situs. Anda dapat menentukan salah satu dari tiga nilai berikut:.

- `Strict`
    Cookie hanya dikirim untuk permintaan dari situs yang sama.

- `Lax`
    Cookie dikirim untuk navigasi biasa, tetapi dengan beberapa pembatasan.

- `None`
    Cookie dapat dikirim bahkan untuk permintaan lintas situs. Namun, atribut `Secure` juga diperlukan.

Contoh: Cookie aman

1document.cookie = "sessionId=abc123; secure; SameSite=Strict";

Jika Anda menentukan secure, Cookie hanya akan dikirim melalui komunikasi HTTPS.
Jika Anda menentukan SameSite=Strict, Cookie tidak akan dikirim untuk permintaan antar situs, sehingga efektif sebagai tindakan pencegahan CSRF.
Atribut-atribut keamanan semacam ini sangat penting untuk Cookie yang digunakan untuk autentikasi atau manajemen sesi.

Encoding dan decoding

Karena nilai cookie bisa berisi karakter khusus, lebih aman menggunakan encodeURIComponent.

1const date = new Date();
2date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 days
3
4const username = "JohnDoe";
5document.cookie =
6    "username=" + encodeURIComponent(username) +
7    "; max-age=604800; path=/; SameSite=None; Secure";
8
9console.log(decodeURIComponent(getCookie("username"))); // "JohnDoe"

Dengan menggunakan encodeURIComponent, Anda dapat dengan aman menyimpan spasi, simbol, dan lain-lain di dalam Cookie.
Saat membacanya, gunakan decodeURIComponent untuk mengembalikan string aslinya.
Dalam contoh ini, max-age=604800 digunakan untuk mengatur masa berlaku selama 7 hari (604.800 detik). Ini adalah metode untuk menentukan tanggal kedaluwarsa, mirip dengan expires. max-age dapat ditentukan dalam detik dan sering lebih mudah digunakan.

Contoh praktis: Menyimpan dan memuat tema

Berikut adalah contoh menyimpan tema yang dipilih pengguna dalam cookie dan secara otomatis menerapkannya saat kunjungan berikutnya.

 1function setTheme(theme) {
 2    document.cookie =
 3        "theme=" + encodeURIComponent(theme) +
 4        "; max-age=604800; path=/; SameSite=None; Secure"; // 1 week
 5    applyTheme(theme);
 6}
 7
 8function applyTheme(theme) {
 9    document.body.style.backgroundColor = theme === "dark" ? "#333" : "#fff";
10    document.body.style.color = theme === "dark" ? "#fff" : "#000";
11}
12
13function getCookie(name) {
14    const cookies = document.cookie.split('; ');
15    for (const cookie of cookies) {
16        const [key, value] = cookie.split('=');
17        if (key === name) {
18            return decodeURIComponent(value);
19        }
20    }
21    return null;
22}
23
24const savedTheme = getCookie("theme");
25if (savedTheme) {
26    applyTheme(savedTheme);
27}

1<button onclick="setTheme('light')">Light</button>
2<button onclick="setTheme('dark')">Dark</button>

Fungsi setTheme menyimpan tema yang dipilih ke dalam suatu Cookie dan langsung memanggil applyTheme untuk memperbarui tampilan layar.
Fungsi applyTheme mengubah warna latar belakang dan teks pada body sesuai tema yang dipilih.
Dalam contoh ini, karena max-age=604800 diatur, pengaturan tema akan tersimpan selama satu minggu.
Karena pilihan pengguna dapat dipertahankan saat mengunjungi kembali halaman, pengalaman pengguna (UX) menjadi lebih baik.

Batasan dan perhatian dalam penggunaan cookie

Perhatikan hal-hal berikut saat menggunakan cookie:.

Batasan Ukuran Ukuran satu cookie dibatasi sekitar 4KB.
Batas jumlah cookie yang dapat disimpan Tergantung pada browser-nya, Anda hanya dapat menyimpan sekitar 20 hingga 50 per domain.
Tindakan Pencegahan Keamanan Isi dari Cookie pada dasarnya disimpan sebagai teks biasa, sehingga tidak cocok untuk menyimpan informasi rahasia seperti kata sandi.
Cookie yang tidak dapat diakses dari JavaScript Cookie dengan atribut HttpOnly tidak dapat dibaca dari JavaScript demi alasan keamanan.

Server dan `Cookie`

1Set-Cookie: sessionId=abc123; HttpOnly; Secure; SameSite=Strict

Beberapa atribut Cookie, seperti HttpOnly, tidak dapat diatur melalui JavaScript. Atribut-atribut ini harus diatur di sisi server.

Ringkasan

Memanipulasi Cookie dengan JavaScript dapat meningkatkan pengalaman pengguna dan menjaga status. Namun, harap perhatikan poin-poin berikut agar dapat menanganinya secara aman dan tepat.

Simpan hanya informasi minimum yang diperlukan Dari sudut pandang privasi dan keamanan, hindari menyimpan informasi pribadi atau sensitif dan catat hanya data yang diperlukan saja.
Atur atribut keamanan dengan benar Atur atribut seperti Secure dan SameSite untuk mencegah serangan lintas situs seperti XSS dan CSRF.
Pengkodean dan Dekode Data Gunakan encodeURIComponent dan decodeURIComponent untuk menyimpan dan membaca nilai Cookie dengan aman agar karakter khusus dan bahasa Jepang dapat ditangani dengan benar.

Dengan mempelajari cara penggunaan Cookie yang benar, Anda dapat membangun aplikasi web yang lebih canggih dan aman.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video

Shared Worker di JavaScript

JavaScript dan Cookie

YouTube Video

JavaScript dan Cookie

Membuat (menulis) cookie

Membuat cookie dengan tanggal kedaluwarsa

Mengambil (membaca) cookie

Fungsi untuk mendapatkan nilai cookie

Menghapus cookie

Opsi cookie

Contoh: Cookie aman

Encoding dan decoding

Contoh praktis: Menyimpan dan memuat tema

Batasan dan perhatian dalam penggunaan cookie

Server dan Cookie

Ringkasan

YouTube Video

Server dan `Cookie`