Panduan Komprehensif untuk Kuki dalam JavaScript

Kuki dalam JavaScript

Kuki ialah cebisan kecil data yang disimpan pada penyemak imbas pengguna oleh tapak web. Ia biasanya digunakan untuk menyimpan pilihan pengguna, menjejak sesi atau mengekalkan keadaan antara permintaan.

JavaScript menyediakan kaedah mudah untuk mencipta, membaca dan memadam kuki, menjadikannya alat penting untuk storan dan pengurusan sesi pihak pelanggan.

---

1. Menetapkan Kuki

Kuki dibuat dengan memberikan rentetan pada document.cookie.

Sintaks:

document.cookie = "key=value; expires=DATE; path=PATH; domain=DOMAIN; secure; SameSite=VALUE";

• key=value: Pasangan nilai kunci kuki.
• tamat tempoh: Tarikh luput (pilihan). Jika tidak ditetapkan, kuki ialah kuki sesi dan dipadamkan apabila penyemak imbas ditutup.
• laluan: Laluan dalam tapak tempat kuki boleh diakses (lalai: laluan semasa).
• domain: Domain tempat kuki boleh diakses (lalai: domain semasa).
• selamat: Kuki hanya dihantar melalui HTTPS.
• SameSite: Mengawal gelagat merentas tapak (Ketat, Longgar atau Tiada).

Contoh:

document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

---

2. Membaca Kuki

Sifat document.cookie mengembalikan semua kuki untuk domain dan laluan semasa sebagai rentetan tunggal.

Contoh:

console.log(document.cookie);
// Output: "username=JohnDoe; theme=dark; sessionId=abc123"

Untuk mengekstrak kuki tertentu, huraikan rentetan:

function getCookie(name) {
  const cookies = document.cookie.split("; ");
  for (let cookie of cookies) {
    const [key, value] = cookie.split("=");
    if (key === name) return value;
  }
  return null;
}
console.log(getCookie("username")); // Output: JohnDoe

---

3. Mengemas kini Kuki

Untuk mengemas kini kuki, tetapkannya semula dengan kunci yang sama tetapi nilai atau pilihan yang berbeza.

Contoh:

document.cookie = "username=JaneDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
console.log(document.cookie); // Output: "username=JaneDoe; ..."

---

4. Memadamkan Kuki

Untuk memadamkan kuki, tetapkan tarikh tamat tempohnya kepada tarikh yang lalu.

Contoh:

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

---

5. Mengendalikan Watak Istimewa

Aksara khas dalam nilai kuki mesti dikodkan menggunakan encodeURIComponent dan dinyahkodkan dengan decodeURIComponent.

Contoh:

document.cookie = "userInfo=" + encodeURIComponent("John Doe & Admin");
console.log(decodeURIComponent(getCookie("userInfo"))); // Output: John Doe & Admin

---

6. Pertimbangan Keselamatan

1. Bendera Selamat:
   • Gunakan Secure untuk memastikan kuki dihantar hanya melalui HTTPS.

   document.cookie = "sessionId=abc123; secure";

1. HttpOnly Cookies:

   • Tidak boleh diakses melalui JavaScript (ditetapkan pada bahagian pelayan).

2. Atribut SameSite:

   • Mengawal tingkah laku kuki merentas tapak untuk mengelakkan serangan CSRF.

document.cookie = "key=value; expires=DATE; path=PATH; domain=DOMAIN; secure; SameSite=VALUE";

---

7. Ringkasan Atribut Kuki

Attribute	Description
expires	Expiration date for the cookie.
path	Limits cookie to specific paths.
domain	Specifies the domain for the cookie.
secure	Ensures cookie is sent over HTTPS.
SameSite	Controls cross-site cookie behavior.

---

8. Mengurus Kuki dengan JavaScript

Untuk memudahkan pengurusan kuki, rangkumkan operasi biasa dalam fungsi utiliti.

Contoh:

document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

---

9. Ringkasan

Kuki ialah alat asas untuk mengekalkan keadaan dalam aplikasi web. Pengendalian yang betul memastikan kefungsian sambil melindungi data pengguna.

• Gunakan Secure and SameSite untuk kuki yang lebih selamat.
• Elakkan menyimpan maklumat sensitif terus dalam kuki.
• Gunakan utiliti JavaScript untuk memudahkan pengurusan kuki.

Hai, saya Abhay Singh Kathayat!
Saya seorang pembangun tindanan penuh dengan kepakaran dalam kedua-dua teknologi hadapan dan belakang. Saya bekerja dengan pelbagai bahasa pengaturcaraan dan rangka kerja untuk membina aplikasi yang cekap, berskala dan mesra pengguna.
Jangan ragu untuk menghubungi saya melalui e-mel perniagaan saya: kaashshorts28@gmail.com.

Atas ialah kandungan terperinci Panduan Komprehensif untuk Kuki dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!