JavaScript - Atribut Kuki

Haih, rakan-rakan pengembang web yang ambisius! Hari ini, kita akan melaksanakan perjalanan manis ke dunia kuki. Tidak, bukan jenis kuki coklat (walaupun saya harap!), tetapi jenis digital yang membuat pengalaman web kita lebih mulus dan personal. Jadi, pegangkan susu maya Anda, dan mari kita merasakan topik lezat tentang Atribut Kuki JavaScript!

Atribut Kuki

Sebelum kita membanjiri hal-hal spesifik, mari kita mengerti apa itu atribut kuki. Bayangkan kuki sebagai catatan kecil yang browser Anda simpan tentang Anda. Atribut kuki seperti petunjuk khusus di atas catatan ini, memberitahu browser bagaimana menghandle mereka. Mereka penting untuk keamanan, fungsi, dan pengalaman pengguna.

Berikut adalah gambaran singkat dari atribut kuki utama yang kita akan diskusikan:

Atribut	Deskripsi
Name/Value	Data pokok kuki
Path	Menentukan jalur mana di server yang dapat mengakses kuki
Expires	Mengatur tanggal kadaluarsa kuki
Max-Age	Menentukan berapa lama kuki harus bertahan
Domain	Menentukan domain mana yang dapat menggunakan kuki

Memeriksa Nilai Atribut di Browser

Sebelum kita mulai mengatur kuki, mari belajar bagaimana untuk memeriksa mereka. Buka alat pengembang browser Anda (biasanya F12), pergi ke tab Application atau Storage, dan cari Kuki. Itu seperti melihat ke dalam wadah kuki!

// Menyetel kuki sederhana
document.cookie = "username=John Doe";

// Memeriksa di konsol
console.log(document.cookie);

Ketika Anda menjalankan kode ini dan memeriksa konsol Anda, Anda akan melihat "username=John Doe". Itu begitu mudah untuk menyetel dan membaca kuki dasar!

Atribut Name/Value Kuki

Pasangan nama-nilai adalah hati kuki. Itu seperti kunci dan harta karun yang sesuai dengannya.

// Menyetel kuki dengan nama dan nilai
document.cookie = "favoriteColor=blue";

// Menyetel beberapa kuki
document.cookie = "favoriteAnimal=dog";
document.cookie = "favoriteNumber=42";

// Membaca kuki
console.log(document.cookie);

Ini akan mengeluarkan semua kuki Anda. Ingat, setiap document.cookie assignment menambahkan kuki baru, itu tidak menghapus yang ada sebelumnya!

Atribut Path Kuki

Atribut path menentukan halaman mana di situs Anda yang dapat mengakses kuki. Itu seperti memberitahu kuki mana saja ruangan di rumah situs Anda yang diizinkan masuk.

// Menyetel kuki untuk jalur tertentu
document.cookie = "user=Alice; path=/dashboard";

// Menyetel kuki untuk keseluruhan situs
document.cookie = "theme=dark; path=/";

Dalam contoh ini, kuki "user" hanya dapat diakses di jalur "/dashboard" dan subjalurnya, sedangkan kuki "theme" tersedia di seluruh situs.

Atribut Expires Kuki

Atribut expires mengatur tanggal kuki harus dihapus. Itu seperti memberikan tanggal kadaluarsa pada susu!

// Menyetel kuki yang kadaluarsa dalam 7 hari
let expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + 7);
document.cookie = "subscription=premium; expires=" + expirationDate.toUTCString();

Kuki ini akan self-destruct dalam 7 hari. Mission Impossible, gaya kuki!

Atribut Max-Age Kuki

Atribut maxAge mengatur berapa lama kuki harus bertahan dalam detik. Itu seperti timer countdown untuk kuki Anda.

// Menyetel kuki yang bertahan selama 1 jam
document.cookie = "session=active; max-age=3600";

// Menyetel kuki yang dihapus segera
document.cookie = "tempData=123; max-age=0";

Kuki pertama akan bertahan selama satu jam, sedangkan kuki kedua seperti pesan self-destruct - itu hilang segera setelah diciptakan!

Atribut Domain Kuki

Atribut domain menentukan domain mana yang dapat mengakses kuki. Itu seperti memutuskan teman mana saja yang dapat berbagi resep rahasia Anda.

// Menyetel kuki untuk domain saat ini dan semua subdomainnya
document.cookie = "language=en; domain=.example.com";

// Menyetel kuki untuk domain tepat
document.cookie = "userId=12345; domain=shop.example.com";

Dalam contoh pertama, kuki dapat diakses di example.com dan semua subdomainnya (seperti blog.example.com). Kuki kedua hanya untuk shop.example.com.

Sekarang, mari kita gabungkan semua ini dalam contoh yang lebih kompleks:

function setCookie(name, value, days, path, domain, secure) {
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 ? "; path=" + path : "") +
(domain ? "; domain=" + domain : "") +
(secure ? "; secure" : "");
}

// Penggunaan
setCookie("username", "JohnDoe", 7, "/", "example.com", true);

Fungsi ini memungkinkan Anda menyetel kuki dengan semua atribut yang kita diskusikan. Itu seperti memiliki pisau Swiss Army untuk pembuatan kuki!

Ingat, kuki adalah alat yang kuat, tetapi dengan kekuatan yang besar datang tanggung jawab yang besar. Selalu berhati-hati terhadap privasi dan keamanan pengguna saat menggunakan kuki.

Dan itu adalah, teman-teman! Anda sekarang dilengkapi untuk menghandle kuki dalam JavaScript. Berikut kali Anda menjelajahi web dan ia mengingat preferensi Anda, Anda akan tahu rahasia manis di baliknya. Selamat coding, dan may your cookies always be fresh and secure!

Credits: Image by storyset