JavaScript dan Kuki

Articles

JavaScript dan Kuki

Artikel ini menerangkan tentang JavaScript dan kuki.

Kami akan menerangkan dengan teliti segala-galanya langkah demi langkah, daripada asas kuki, membaca dan menulis, keselamatan, sehinggalah contoh praktikal.

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 Kuki

Kuki merujuk kepada sekeping data kecil yang disimpan dalam pelayar pengguna. Ia digunakan terutamanya untuk tujuan berikut:.

Pengesahan pengguna (mengekalkan status log masuk)
Menyimpan tetapan pengguna (bahasa, tema, dan lain-lain)
Penjejakan (sejarah pelayaran, dan lain-lain)

Dalam JavaScript, anda boleh membaca dan menulis kuki menggunakan document.cookie.

Mencipta (menulis) kuki

Kuki dicipta dengan sintaks berikut:.

1document.cookie = "username=JohnDoe";

Kod ini menyimpan kuki bernama "username=JohnDoe" dalam pelayar.

Membuat kuki dengan tarikh luput

Kuki boleh ditetapkan tarikh luputnya. Jika tiada tarikh luput ditetapkan, ia dianggap sebagai kuki sesi dan akan dipadamkan apabila pelayar 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 tarikh luput kuki dalam format UTC.
Atribut path menentukan laluan di mana kuki akan dihantar. / bermaksud seluruh laman web.
Jika anda menentukan SameSite=None, Cookie akan dihantar walaupun dengan permintaan merentas laman. Walau bagaimanapun, dalam kes ini, anda mesti sentiasa menyertakan atribut Secure.
Menentukan Secure mengehadkan Cookie kepada komunikasi HTTPS sahaja, sekali gus meningkatkan keselamatan.
Dengan merujuk kepada document.cookie, anda boleh mendapatkan semua Cookie yang tersedia di halaman semasa dalam bentuk rentetan.
Dengan menggunakan console.log, anda boleh memeriksa perbezaan antara nilai sebenar Cookie yang ditetapkan di pelayar dan nilai yang boleh diperoleh.

Mendapatkan (membaca) kuki

Anda boleh mendapatkan semua kuki sebagai rentetan menggunakan 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 pulangan document.cookie ialah satu rentetan di mana semua Cookie digabungkan dalam format 'key=value;'.
Adalah mudah untuk menggunakan fungsi bagi mengurai rentetan ini dan mengekstrak nilai yang dikehendaki.

Fungsi untuk mendapatkan nilai sesuatu kuki

 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 membahagikan kunci dan nilai menggunakan split() dan mengembalikan nilai jika ia sepadan dengan kunci yang ditentukan.
Dengan menggunakan decodeURIComponent, anda boleh mendapatkan aksara yang telah dikodkan dengan betul.
Jika kunci yang sepadan tidak wujud, ia akan mengembalikan null.

Memadam kuki

Kuki boleh dipadamkan dengan menetapkan tarikh luputnya ke tarikh yang telah lalu.

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 memberikan nilai kosong kepada username dan menetapkan tarikh luput ke masa lalu, ia akan dipadamkan.
Apabila memadamkan Cookie, anda juga mesti memadankan atribut path, SameSite, dan Secure dengan yang digunakan semasa ia dicipta.
Dalam contoh ini, username dipadamkan, dan Cookie lain seperti theme=dark kekal.

Pilihan kuki

Anda boleh menetapkan pelbagai pilihan untuk mengawal tingkah laku kuki. Yang utama adalah seperti berikut:.

Menetapkan tarikh luput kuki dalam format UTC. Jika tidak ditetapkan, kuki akan menjadi kuki sesi dan dipadamkan apabila pelayar ditutup.

Menetapkan tarikh luput kuki dalam saat. Ini mengambil keutamaan berbanding `expires`.

Menetapkan laluan untuk kuki dihantar. Sebagai contoh, jika anda menetapkan `/admin`, kuki hanya akan dihantar ke halaman di bawah laluan itu.

Menetapkan domain di mana kuki sah digunakan. Biasanya, ia ditetapkan untuk domain semasa, tetapi anda boleh menggunakannya pada semua subdomain, seperti `.example.com`.

Apabila atribut ini ditetapkan, kuki hanya dihantar melalui HTTPS. Untuk keselamatan lebih tinggi, sentiasa tetapkan atribut ini untuk maklumat sensitif.

Mengawal sama ada kuki dihantar pada permintaan antara tapak. Anda boleh menetapkan salah satu daripada tiga nilai berikut:.

- `Strict`
    Kuki hanya dihantar untuk permintaan dari laman yang sama.

- `Lax`
    Kuki dihantar untuk pelayaran biasa, tetapi dengan beberapa had.

- `None`
    Kuki boleh dihantar walaupun untuk permintaan antara tapak. Namun, atribut `Secure` juga diperlukan.

Contoh: Kuki selamat

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

Jika anda menentukan secure, Cookie hanya akan dihantar melalui komunikasi HTTPS.
Jika anda menentukan SameSite=Strict, Cookie tidak akan dihantar untuk permintaan merentas laman, menjadikannya berkesan sebagai langkah pencegahan CSRF.
Atribut selamat seperti ini sangat penting untuk Cookie penting yang digunakan untuk pengesahan atau pengurusan sesi.

Pengekodan dan penyahkodan

Oleh kerana nilai kuki mungkin mengandungi aksara khas, adalah lebih selamat untuk 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 boleh menyimpan ruang, simbol, dan sebagainya dengan selamat dalam Cookie.
Apabila membacanya, gunakan decodeURIComponent untuk mengembalikan rentetan asal.
Dalam contoh ini, max-age=604800 digunakan untuk menetapkan tempoh luput kepada 7 hari (604,800 saat). Ini adalah kaedah untuk menentukan tarikh luput, serupa dengan expires. max-age boleh ditentukan dalam beberapa saat dan sering lebih mudah digunakan.

Contoh praktikal: Menyimpan dan memuat tema

Berikut ialah contoh menyimpan tema yang dipilih pengguna dalam kuki dan memohonkannya secara automatik pada lawatan seterusnya.

 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 Cookie dan serta-merta memanggil applyTheme untuk mengemas kini skrin.
Fungsi applyTheme menukar warna latar belakang dan teks pada body mengikut tema.
Dalam contoh ini, kerana max-age=604800 ditetapkan, tetapan tema dikekalkan selama seminggu.
Oleh kerana pilihan pengguna boleh dikekalkan apabila melawat semula halaman, pengalaman pengguna (UX) dipertingkatkan.

Had dan amaran penggunaan kuki

Ambil perhatian tentang perkara berikut apabila menggunakan kuki:.

Had Saiz Saiz satu kuki dihadkan kepada kira-kira 4KB.
Had bilangan kuki yang boleh disimpan Bergantung pada pelayar, anda hanya boleh menyimpan kira-kira 20 hingga 50 setiap domain.
Langkah-langkah Keselamatan Kandungan Cookie pada asasnya disimpan dalam teks biasa, jadi ia tidak sesuai untuk menyimpan maklumat sulit seperti kata laluan.
Cookie yang tidak boleh diakses dari JavaScript Cookie dengan atribut HttpOnly tidak boleh dibaca dari JavaScript atas sebab keselamatan.

Pelayan dan `Cookie`

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

Sesetengah atribut Cookie seperti HttpOnly tidak boleh ditetapkan melalui JavaScript. Atribut ini mesti ditetapkan di bahagian pelayan.

Ringkasan

Mengendalikan Cookie menggunakan JavaScript boleh meningkatkan pengalaman pengguna dan mengekalkan keadaan (state). Walau bagaimanapun, sila ambil perhatian perkara-perkara berikut untuk mengendalikannya dengan selamat dan sesuai.

Simpan hanya maklumat minimum yang diperlukan Dari sudut privasi dan keselamatan, elakkan penyimpanan maklumat peribadi atau sensitif serta hanya rekodkan data yang diperlukan.
Tetapkan atribut keselamatan dengan betul Tetapkan atribut seperti Secure dan SameSite untuk mengelakkan serangan rentas laman seperti XSS dan CSRF.
Pengekodan dan Penyahkodan Data Gunakan encodeURIComponent dan decodeURIComponent untuk menyimpan dan membaca nilai Cookie dengan selamat supaya aksara khas dan Jepun dapat dikendalikan dengan betul.

Dengan mempelajari cara penggunaan Cookie yang betul, anda boleh membina aplikasi web yang lebih maju dan selamat.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

Shared Worker dalam JavaScript

JavaScript dan Kuki

YouTube Video

JavaScript dan Kuki

Mencipta (menulis) kuki

Membuat kuki dengan tarikh luput

Mendapatkan (membaca) kuki

Fungsi untuk mendapatkan nilai sesuatu kuki

Memadam kuki

Pilihan kuki

Contoh: Kuki selamat

Pengekodan dan penyahkodan

Contoh praktikal: Menyimpan dan memuat tema

Had dan amaran penggunaan kuki

Pelayan dan Cookie

Ringkasan

YouTube Video

Pelayan dan `Cookie`