JavaScript dan Kuki

Hai sana, para ahli JavaScript masa depan! Hari ini, kita akan memulakan sebuah perjalanan yang menarik ke dunia kuki. Tidak, bukan jenis yang kamu lembapkan dalam susu (walaupun saya tidak akan keberatan jika mendapat satu sekarang ini), tetapi jenis digital yang membuat pengalaman web kita lebih lancar dan lebih personal. Jadi, siapkan apron maya anda, dan mari kita mulakan memasak... saya maksudkan, mengoding!

Apa Itu Kuki?

Kuki adalah sejumlah data kecil yang disimpan di komputer pengguna oleh laman web yang mereka lawati. Bayangkan mereka seperti catatan digital kecil yang laman web meletakkan di komputer anda untuk mengingat hal-hal tentang anda. Catatan ini boleh mengandungi pelbagai jenis informasi, seperti preferens anda, butir log masuk, atau item di troli belanja anda.

Pada pertama kalinya saya belajar tentang kuki, saya bayangkan hantu komputer kecil menulis catatan dan menyisipkannya ke dalam PC saya. Walaupun itu bukan betul bagaimana ia bekerja, tetapi itu bukanlah cara yang buruk untuk menggambar konsep ini!

Mengapa Kuki Diperlukan?

Mungkin anda bertanya, "Mengapa laman web tidak dapat mengingat hal-hal tanpa kuki ini?" Mari saya ceritakan kecil sedikit.

Bayangkan anda di sebuah kafe sibuk. Anda memesan kopi dan sandwich, tetapi kemudian anda perlu menggunakan bilik air. Ketika anda kembali, bagaimana barista tahu mana order milik anda di antara laut pelanggan? Itu di mana kuki berguna di dunia digital.

Kuki diperlukan untuk beberapa sebab:

1. Mengingat preferens pengguna
2. Menyimpan pengguna dalam log masuk
3. Mengikuti item di troli belanja
4. Personalizing pengalaman pengguna
5. Menganalisis perilaku pengguna untuk peningkatan

Tanpa kuki, setiap kali anda melawati laman web, ia akan seperti pertemuan pertama - tanpa ingatan preferens anda, tanpa log masuk tersimpan, tanpa item di troli belanja. Bukan sangat convenient, kan?

Bagaimana Ia Bekerja?

Sekarang, mari kita lihat di bawah penutup dan lihat bagaimana kuki digital ini sebenarnya bekerja. Jangan khawatir; ia tidak secomplicates yang mungkin terdengar!

Ketika anda melawati laman web, ia boleh mengirimkan kuki ke pelayar anda. Pelayar anda kemudian menyimpan kuki ini di komputer anda. Pada saat anda melawati laman web yang sama lagi, pelayar anda mengirimkan kuki kembali ke laman web. Itu seperti tangan rahasia antara komputer anda dan laman web.

Ini adalah diagram sederhana bagaimana ia bekerja:

Pengguna melawati laman web
↓
Laman web mengirimkan kuki
↓
Pelayar menyimpan kuki
↓
Pengguna melawati laman web lagi
↓
Pelayar mengirimkan kuki
↓
Laman web mengenal pengguna

Sekarang kita mengerti dasar-dasar, mari kita roll up lengan dan mulai bekerja dengan kuki di JavaScript!

Menetapkan/Menyimpan Kuki

Menetapkan kuki adalah seperti meninggalkan catatan untuk nanti. Dalam JavaScript, kita menggunakan properti document.cookie untuk membuat kuki. Ini adalah bagaimana anda boleh melakukannya:

document.cookie = "username=John Doe";

mari kita pecahkan ini:

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

Anda juga boleh menetapkan beberapa kuki:

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

Setiap pernyataan document.cookie membuat kuki baru. Ia tidak menimpa yang ada sebelumnya.

Membaca Kuki

Membaca kuki adalah seperti menyelidiki catatan yang anda tinggalkan untuk diri anda sendiri. Ini adalah bagaimana anda boleh membaca kuki:

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

Ini akan memberikan anda semua kuki sebagai satu string panjang. Tetapi biasanya, anda hanya ingin mendapatkan nilai kuki tertentu. Ini adalah fungsi untuk melakukan 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 memecahkan string kuki, mengulanginya untuk setiap kuki, dan mengembalikan nilai jika ia menemukan kesesuaian.

Menetapkan Tarikh Kadaluarsa Kuki

Kuki adalah seperti susu - mereka boleh basi jika ditinggalkan terlalu lama. Secara default, kuki expired ketika sesi pelayar berakhir. Tetapi anda boleh menetapkan tarikh kadaluarsa khusus:

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

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

Kuki ini akan expired dalam satu bulan. Atribut expires memberitahu pelayar kapan untuk menghapus kuki.

Menghapus Kuki

kadang-kadang, anda perlu menghapus kuki. Untuk menghapus kuki, anda menetapkan tarikh kadaluarsa ke tanggal yang lalu:

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

Ini menetapkan nilai kuki ke kosong dan menetapkan tarikh kadaluarsa ke waktu di masa lalu, secara efektif menghapusnya.

Memperbarui Kuki

Memperbarui kuki adalah seperti menetapkan kuki lagi dengan nilai baru:

document.cookie = "username=Jane Doe";

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

Tabel Metode Kuki

Ini adalah tabel praktis yang menggabungkan metode yang kita belajar:

Tindakan	Metode
Menetapkan Kuki	document.cookie = "key=value";
Membaca Semua Kuki	let allCookies = document.cookie;
Membaca Kuki Tertentu	Gunakan fungsi getCookie()
Menetapkan Tarikh Kadaluarsa	document.cookie = "key=value; expires=date";
Menghapus Kuki	Set tarikh kadaluarsa ke tanggal yang lalu
Memperbarui Kuki	Set kuki lagi dengan nilai baru

Dan itu lah, teman-teman! Anda sekarang dilengkapi dengan pengetahuan untuk bekerja dengan kuki di JavaScript. Ingat, dengan kekuatan yang besar datang tanggung jawab yang besar. Selalu hormati privasi pengguna dan jujur tentang penggunaan kuki anda.

Berikut kali anda menjelajah web dan sebuah laman web mengingat preferens anda, anda bisa tersenyum tahu dan pikir, "Ah, kuki bekerja!" Selamat mengoding, dan semoga kuki digital anda selalu segar dan kuki nyata anda selalu lezat!

Credits: Image by storyset