ID (Indonesia) Translation

JavaScript dan Cookies

Halo teman-teman, para ahli JavaScript masa depan! Hari ini, kita akan memulai sebuah perjalanan yang menarik ke dalam dunia cookies. Tidak, bukan jenis yang kamu rebah dalam susu (walaupun saya tidak keberatan mendapat salah satu saat ini), tapi jenis digital yang membuat pengalaman web kita lebih mulus dan personal. Jadi, siapkan apron virtualmu, dan mari mulai memasak... saya maksudkan, mencoding!

Apa Itu Cookies?

Cookies adalah pieces kecil data yang disimpan di komputer pengguna oleh situs web yang mereka kunjungi. Pensejukkan pikirannya seperti catatan digital kecil yang situs web menempelkan di komputermu untuk mengingat hal-hal tentangmu. Catatan ini dapat berisi berbagai informasi, seperti preferensimu, detail login, atau item di keranjang belanja.

Ketika saya pertama kali belajar tentang cookies, saya menghayalkan para elf komputer kecil menulis catatan dan memasukkannya ke dalam PC saya. Walaupun itu bukan cara yang benar-benar kerjanya, itu bukanlah cara yang buruk untuk menggambar konsep ini!

Mengapa Cookies Diperlukan?

Mungkin kamu bertanya-tanya, "Mengapa situs web tidak dapat mengingat hal-hal tanpa hal ini cookie?" mari saya ceritakan sedikit cerita.

Imaginasi kamu di sebuah kafe yang sibuk. Kamu memesan kopi dan sandwich, tapi kemudian kamu perlu menggunakan kamar mandi. Ketika kamu kembali, bagaimana barista tahu mana order milikmu di antara laut pelanggan? Itu di mana cookies berguna di dunia digital.

Cookies diperlukan karena beberapa alasan:

1. Mengingat preferensi pengguna
2. Menyimpan pengguna dalam login
3. Mengikuti item di keranjang belanja
4. Personalisasi pengalaman pengguna
5. Analisis perilaku pengguna untuk peningkatan

Tanpa cookies, setiap kali kamu mengunjungi situs web, akan seperti pertemuan pertama - tanpa ingatan preferensimu, tanpa login yang disimpan, tanpa item di keranjangmu. Tidak convenient, kan?

Bagaimana Cara Kerjanya?

Sekarang, mari kita lihat di bawah kap dan lihat bagaimana cookies digital ini benar-benar bekerja. Jangan khawatir; itu tidak secomplicates sebagai yang mungkin terdengar!

Ketika kamu mengunjungi sebuah situs web, itu dapat mengirimkan cookie ke browsermu. Browsermu kemudian menyimpan cookie ini di komputermu. Saat kamu mengunjungi situs web yang sama lagi, browsermu mengirimkan cookie kembali ke situs web. Itu seperti shakenya rahasia antara komputermu dan situs web.

Ini adalah diagram sederhana tentang bagaimana itu bekerja:

Pengguna mengunjungi situs web
↓
Situs web mengirimkan cookie
↓
Browser menyimpan cookie
↓
Pengguna mengunjungi situs web lagi
↓
Browser mengirimkan cookie
↓
Situs web mengenali pengguna

Sekarang kita mengerti dasarnya, mari kita kerahkan lengan dan mulai bekerja dengan cookies di JavaScript!

Menyetel/Menyimpan Cookies

Menyetel cookie adalah seperti meninggalkan catatan untuk kemudian. Dalam JavaScript, kita menggunakan properti document.cookie untuk membuat cookie. mari kita lihat bagaimana kamu bisa melakukannya:

document.cookie = "username=John Doe";

mari kitauraikan ini:

• document.cookie adalah properti yang kita gunakan untuk berinteraksi dengan cookies.
• "username=John Doe" adalah cookie yang sebenarnya. Itu adalah pasangan key-value, di mana username adalah key dan John Doe adalah value.

Kamu juga bisa menyetel beberapa cookies:

document.cookie = "username=John Doe";
document.cookie = "age=30";
document.cookie = "city=New York";

Setiap pernyataan document.cookie membuat cookie baru. Itu tidak menghapus yang lain.

Membaca Cookies

Membaca cookie adalah seperti menggali catatan yang kamu tinggalkan untuk dirimu sendiri. mari kita lihat bagaimana kamu bisa membaca cookies:

let allCookies = document.cookie;
console.log(allCookies);

Ini akan memberikanmu semua cookies sebagai satu string panjang. Tetapi biasanya, kamu ingin mendapatkan nilai cookie tertentu. mari kita buat fungsi untuk itu:

function getCookie(name) {
let cookieArr = document.cookie.split(";");

for(let i = 0; i < cookieArr.length; i++) {
let cookiePair = cookieArr[i].split("=");

if(name == cookiePair[0].trim()) {
return decodeURIComponent(cookiePair[1]);
}
}

return null;
}

// Penggunaan
let username = getCookie("username");
console.log(username); // Output: John Doe

Fungsi ini membagi string cookie, mengulang setiap cookie, dan mengembalikan nilai jika menemukan kesesuaian.

Menyetel Tanggal Kadaluarsa Cookies

Cookies adalah seperti susu - mereka bisa basi jika ditinggalkan terlalu lama. Secara default, cookies kadaluarsa saat sesi browser berakhir. Tetapi kamu bisa menyetel tanggal kadaluarsa tertentu:

let expiryDate = new Date();
expiryDate.setMonth(expiryDate.getMonth() + 1);

document.cookie = "username=John Doe; expires=" + expiryDate.toUTCString();

Cookie ini akan kadaluarsa dalam satu bulan. Atribut expires memberitahu browser kapan menghapus cookie.

Menghapus Cookie

kadang-kadang, kamu perlu membuang cookie. Untuk menghapus cookie, kamu menyetel tanggal kadaluarsa ke tanggal yang telah lewat:

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

Ini menyetel nilai cookie ke kosong dan tanggal kadaluarsa ke waktu di masa lalu, secara efektif menghapusnya.

Memperbarui Cookies

Memperbarui cookie adalah sama mudah seperti menyetelnya lagi dengan nilai baru:

document.cookie = "username=Jane Doe";

Jika cookie dengan nama "username" sudah ada, ini akan memperbarui nilainya. Jika belum ada, itu akan membuat cookie baru.

Tabel Metode Cookie

Ini adalah tabel praktis yang menggabungkan metode yang kita pelajari:

Tindakan	Metode
Menyetel Cookie	document.cookie = "key=value";
Membaca Semua Cookies	let allCookies = document.cookie;
Membaca Cookie Tertentu	Gunakan fungsi getCookie()
Menyetel Tanggal Kadaluarsa	document.cookie = "key=value; expires=date";
Menghapus Cookie	Set tanggal kadaluarsa ke tanggal yang telah lewat
Memperbarui Cookie	Set cookie lagi dengan nilai baru

Dan begitu saja, teman-teman! Kamu sekarang dilengkapi dengan pengetahuan untuk bekerja dengan cookies di JavaScript. Ingat, dengan kekuatan besar datang tanggung jawab besar. Selalu hormati privasi pengguna dan jujur tentang penggunaanmu cookies.

Berikutnya kali kamu menjelajahi web dan sebuah situs ingat preferensimu, kamu bisa tersenyum mengetahui dan pikir, "Ah, cookies bekerja!" Semoga codingmu selalu menyenangkan, dan cookie digitalmu selalu segar serta cookie nyatamu selalu lezat!

Credits: Image by storyset