คุกกี้ JavaScript
คุกกี้ช่วยให้คุณเก็บข้อมูลผู้ใช้ในหน้าเว็บ
คุกกี้คืออะไร?
คุกกี้คือข้อมูลที่จัดเก็บไว้ในไฟล์ข้อความขนาดเล็กในคอมพิวเตอร์ของคุณ
เมื่อเว็บเซิร์ฟเวอร์ส่งหน้าเว็บไปยังเบราว์เซอร์ การเชื่อมต่อจะถูกปิด และเซิร์ฟเวอร์จะลืมทุกอย่างเกี่ยวกับผู้ใช้
คุกกี้ถูกคิดค้นขึ้นเพื่อแก้ปัญหา "วิธีจดจำข้อมูลเกี่ยวกับผู้ใช้":
- เมื่อผู้ใช้เข้าชมหน้าเว็บ ชื่อของเขา/เธอสามารถเก็บไว้ในคุกกี้ได้
- ครั้งต่อไปที่ผู้ใช้เข้าชมหน้า คุกกี้จะ "จำ" ชื่อของเขา/เธอ
คุกกี้จะถูกบันทึกเป็นคู่ชื่อ-ค่า เช่น:
username = John Doe
เมื่อเบราว์เซอร์ร้องขอหน้าเว็บจากเซิร์ฟเวอร์ คุกกี้ที่เป็นของหน้านั้นจะถูกเพิ่มในคำขอ วิธีนี้เซิร์ฟเวอร์จะได้รับข้อมูลที่จำเป็นเพื่อ "จดจำ" ข้อมูลเกี่ยวกับผู้ใช้
ตัวอย่างด้านล่างจะไม่ทำงานหากเบราว์เซอร์ของคุณปิดการสนับสนุนคุกกี้ในเครื่อง
สร้างคุกกี้ด้วย JavaScript
JavaScript สามารถสร้าง อ่าน และลบคุกกี้ด้วยdocument.cookie
คุณสมบัติ
ด้วย JavaScript คุณสามารถสร้างคุกกี้ได้ดังนี้:
document.cookie = "username=John Doe";
คุณยังเพิ่มวันหมดอายุได้ (ตามเวลา UTC) โดยค่าเริ่มต้น คุกกี้จะถูกลบเมื่อปิดเบราว์เซอร์:
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";
ด้วยพารามิเตอร์เส้นทาง คุณสามารถบอกเบราว์เซอร์ว่าคุกกี้เป็นของเส้นทางใด โดยค่าเริ่มต้น คุกกี้เป็นของหน้าปัจจุบัน
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
อ่านคุกกี้ด้วย JavaScript
ด้วย JavaScript คุกกี้สามารถอ่านได้ดังนี้:
let x = document.cookie;
document.cookieจะส่งคืนคุกกี้ทั้งหมดในสตริงเดียวเช่น: cookie1=value; cookie2=ค่า; คุกกี้3=ค่า;
เปลี่ยนคุกกี้ด้วย JavaScript
ด้วย JavaScript คุณสามารถเปลี่ยนคุกกี้ได้เช่นเดียวกับที่คุณสร้าง:
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
คุกกี้เก่าถูกเขียนทับ
ลบคุกกี้ด้วย JavaScript
การลบคุกกี้ทำได้ง่ายมาก
คุณไม่จำเป็นต้องระบุค่าคุกกี้เมื่อคุณลบคุกกี้
เพียงตั้งค่าพารามิเตอร์การหมดอายุเป็นวันที่ที่ผ่านมา:
document.cookie = "username=; expires=Thu, 01
Jan 1970 00:00:00 UTC; path=/;";
คุณควรกำหนดเส้นทางคุกกี้เพื่อให้แน่ใจว่าคุณลบคุกกี้ที่ถูกต้อง
เบราว์เซอร์บางตัวจะไม่อนุญาตให้คุณลบคุกกี้หากคุณไม่ได้ระบุเส้นทาง
คุกกี้สตริง
คุณสมบัติdocument.cookieดูเหมือนสตริงข้อความปกติ แต่มันไม่ใช่
แม้ว่าคุณจะเขียนสตริงคุกกี้ทั้งหมดไปที่ document.cookie เมื่อคุณอ่านอีกครั้ง คุณจะเห็นเฉพาะคู่ของชื่อ-ค่าเท่านั้น
หากคุณตั้งค่าคุกกี้ใหม่ คุกกี้เก่าจะไม่ถูกเขียนทับ คุกกี้ใหม่ถูกเพิ่มใน document.cookie ดังนั้น หากคุณอ่าน document.cookie อีกครั้ง คุณจะได้รับสิ่งต่อไปนี้:
คุกกี้1 = ค่า; cookie2 = ค่า;
หากคุณต้องการค้นหาค่าของคุกกี้ที่ระบุ คุณต้องเขียนฟังก์ชัน JavaScript ที่ค้นหาค่าคุกกี้ในสตริงคุกกี้
ตัวอย่างคุกกี้ JavaScript
ในตัวอย่างต่อไป เราจะสร้างคุกกี้ที่เก็บชื่อผู้เยี่ยมชม
ครั้งแรกที่ผู้เยี่ยมชมมาถึงหน้าเว็บ เขา/เธอจะถูกขอให้กรอกชื่อของเขา/เธอ ชื่อจะถูกเก็บไว้ในคุกกี้
ครั้งต่อไปที่ผู้เข้าชมมาถึงหน้าเดียวกัน เขา/เธอจะได้รับข้อความต้อนรับ
สำหรับตัวอย่าง เราจะสร้าง 3 ฟังก์ชัน JavaScript:
- ฟังก์ชั่นการตั้งค่าคุกกี้
- ฟังก์ชันรับค่าคุกกี้
- ฟังก์ชั่นตรวจสอบค่าคุกกี้
ฟังก์ชั่นการตั้งค่าคุกกี้
ขั้นแรก เราสร้าง a functionที่เก็บชื่อของผู้เข้าชมในตัวแปรคุกกี้:
ตัวอย่าง
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
let expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
ตัวอย่างอธิบาย:
พารามิเตอร์ของฟังก์ชันด้านบนคือชื่อของคุกกี้ (cname) ค่าของคุกกี้ (cvalue) และจำนวนวันที่คุกกี้จะหมดอายุ (วันหมดอายุ)
ฟังก์ชันตั้งค่าคุกกี้โดยเพิ่มชื่อคุกกี้ ค่าคุกกี้ และสตริงที่หมดอายุเข้าด้วยกัน
ฟังก์ชั่นในการรับคุกกี้
จากนั้น เราสร้าง a functionที่คืนค่าของคุกกี้ที่ระบุ:
ตัวอย่าง
function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i <ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
ฟังก์ชั่นอธิบาย:
ใช้ชื่อคุกกี้เป็นพารามิเตอร์ (cname)
สร้างตัวแปร (ชื่อ) พร้อมข้อความที่จะค้นหา (cname + "=")
ถอดรหัสสตริงคุกกี้ เพื่อจัดการกับคุกกี้ที่มีอักขระพิเศษ เช่น '$'
แยก document.cookie บนเครื่องหมายอัฒภาคออกเป็นอาร์เรย์ที่เรียกว่า ca (ca = decodedCookie.split(';'))
วนซ้ำผ่านอาร์เรย์ ca (i = 0; i < ca.length; i++) และอ่านค่าแต่ละค่า c = ca[i])
หากพบคุกกี้ (c.indexOf(name) == 0) ให้คืนค่าของคุกกี้ (c.substring(name.length, c.length)
หากไม่พบคุกกี้ ให้ส่งคืน ""
ฟังก์ชั่นตรวจสอบคุกกี้
สุดท้าย เราสร้างฟังก์ชันที่ตรวจสอบว่ามีการตั้งค่าคุกกี้หรือไม่
หากตั้งค่าคุกกี้ไว้ จะแสดงคำทักทาย
หากไม่ได้ตั้งค่าคุกกี้ จะแสดงกล่องข้อความถามชื่อผู้ใช้ และเก็บคุกกี้ชื่อผู้ใช้ไว้เป็นเวลา 365 วัน โดยเรียกใช้setCookieฟังก์ชัน:
ตัวอย่าง
function checkCookie() {
let
username = getCookie("username");
if (username != "") {
alert("Welcome again " + username);
} else {
username = prompt("Please enter your name:", "");
if (username != ""
&& username != null) {
setCookie("username", username, 365);
}
}
}
ด้วยกันทั้งหมด
ตัวอย่าง
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
let expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue +
";" + expires + ";path=/";
}
function getCookie(cname) {
let name = cname + "=";
let ca
= document.cookie.split(';');
for(let i = 0; i < ca.length; i++)
{
let c = ca[i];
while (c.charAt(0) == '
') {
c = c.substring(1);
}
if (c.indexOf(name)
== 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function
checkCookie() {
let user = getCookie("username");
if (user != "")
{
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:", "");
if (user != "" &&
user != null) {
setCookie("username", user, 365);
}
}
}
ตัวอย่างข้างต้นเรียกใช้checkCookie()ฟังก์ชันเมื่อโหลดหน้า