คุกกี้เป็นทั้งอาหารว่างแสนอร่อยและเป็นส่วนสำคัญของเว็บไซต์สมัยใหม่
คุกกี้ช่วยให้คุณจัดเก็บข้อมูลเกี่ยวกับผู้ใช้ในเว็บเบราว์เซอร์ คุกกี้มักเก็บข้อมูล เช่น เซสชันการตรวจสอบสิทธิ์ ดังนั้นเบราว์เซอร์จะจดจำว่าคุณลงชื่อเข้าใช้หน้าเว็บ
ในคู่มือนี้ เราจะพูดถึงสาเหตุที่คุกกี้มีอยู่ มีคุกกี้ประเภทใดบ้าง และวิธีใช้คุกกี้ใน JavaScript เริ่มกันเลย!
คุกกี้เบราว์เซอร์คืออะไร
คุกกี้คือชุดข้อความที่เก็บข้อมูลเกี่ยวกับผู้ใช้ในเบราว์เซอร์ แนวคิดนี้ริเริ่มโดย Netscape ซึ่งพัฒนาหนึ่งในเบราว์เซอร์ที่ได้รับความนิยมมากที่สุดในโลกในปี 1990 Netscape ได้พัฒนาคุกกี้เพื่อติดตามว่าผู้ใช้ได้เข้าชมไซต์ของตนแล้วหรือไม่ หากมี แสดงว่าผู้ใช้อาจรู้บางอย่างเกี่ยวกับ Netscape
คุกกี้ต้องมีฟิลด์ชื่อและค่าเป็นอย่างน้อย ฟิลด์ชื่อใช้เพื่อระบุเนื้อหาของฟิลด์ค่า คุกกี้สามารถเก็บแอตทริบิวต์เพิ่มเติม เช่น เส้นทางของไฟล์และเมื่อหมดอายุ ขึ้นอยู่กับว่าคุณใช้คุกกี้ในแอปพลิเคชันของคุณอย่างไร
นี่คือตัวอย่างคุกกี้:
Name: Authentication Value: AUTHENTICATION_KEY Domain: careerkarma.com
คุกกี้ถูกจัดเก็บไว้ในคู่คีย์:ค่า เมื่อคุณดูคุกกี้นี้ คุณจะเห็นสิ่งต่อไปนี้:
Authentication=AUTHENTICATION_KEY
คุกกี้นี้จะเก็บค่า AUTHENTICATION_KEY ไว้ในเบราว์เซอร์ของคุณ ทุกครั้งที่คุณเข้าถึงโดเมน careerkarma.com คุกกี้นั้นจะพร้อมใช้งานบนเว็บไซต์
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
ไม่จำกัดจำนวนคุกกี้ที่คุณสามารถตั้งค่าสำหรับไซต์หนึ่งๆ แต่สิ่งที่คุณจะพบคือแอปพลิเคชันส่วนใหญ่จำเป็นต้องตั้งค่าเพียงเล็กน้อย หากมี บ่อยครั้ง คุกกี้ถูกใช้เพื่อติดตามเซสชันของผู้ใช้
ดึงคุกกี้เบราว์เซอร์
JavaScript มีวัตถุที่เรียกว่า document.cookie ซึ่งเก็บข้อมูลเกี่ยวกับคุกกี้ทั้งหมดที่มีอยู่ในเว็บไซต์ ในการตั้งค่า อัปเดต และลบคุกกี้ เราจำเป็นต้องจัดการวัตถุนี้ ในการดึงคุกกี้ เราสามารถเรียกวัตถุนี้ว่า:
console.log(document.cookie);
รหัสนี้จะแสดงรายการคุกกี้ทั้งหมดที่ตั้งไว้ในเบราว์เซอร์ ไม่มีทางที่จะดึงคุกกี้แต่ละรายการจากรายการนี้โดยไม่ต้องเขียนฟังก์ชันที่กำหนดเองให้ทำเช่นนั้น
วิธีตั้งค่าคุกกี้ของเบราว์เซอร์
ฉันจะตั้งค่าคุกกี้ของเบราว์เซอร์ได้อย่างไร มีสิ่งหนึ่งที่คุณควรทราบล่วงหน้า:มันง่ายกว่าการอบคุกกี้ของคุณเอง
สมมติว่าเราต้องการเก็บอีเมลของผู้ใช้ไว้ในคุกกี้ เราสามารถทำได้โดยใช้โค้ด JavaScript นี้:
document.cookie = "email=user@email.com"; console.log(document.cookie);
รหัสนี้สร้างคุกกี้ชื่อ "อีเมล" และค่า "user@email.com" console.log() . ของเรา คำสั่งส่งกลับค่าต่อไปนี้:
email=user@email.com;
คุณยังสามารถระบุเส้นทางที่มีคุกกี้ได้:
document.cookie = "email=user@email.com; path=/dashboard";
รหัสนี้จะทำให้คุกกี้ "อีเมล" ใช้งานได้ในทุกเส้นทางที่ขึ้นต้นด้วย "/แดชบอร์ด"
วันหมดอายุของคุกกี้
ตามค่าเริ่มต้น คุกกี้จะถูกลบเมื่อปิดเบราว์เซอร์ เมื่อคุณตั้งค่าคุกกี้ คุณสามารถเพิ่มวันหมดอายุซึ่งจะแทนที่การตั้งค่านี้:
document.cookie = "email=user@email.com; expires=Wed, 24 Jun 2019 12:00:00 UTC";
การดำเนินการนี้จะสร้างคุกกี้ที่หมดอายุในวันที่ 24 มิถุนายน 2020 ในตอนเริ่มต้นของวัน วันหมดอายุของคุณควรระบุในเวลา UTC
วิธีทั่วไปในการตั้งค่าวันที่หมดอายุคือการใช้ออบเจ็กต์ JavaScript Date ซึ่งส่งคืนการประทับเวลา UTC คุกกี้ที่กำหนดให้หมดอายุในวันที่ 30 มิถุนายน 2020 จะใช้รหัสนี้:
const expiryDate = new Date(2020, 6, 30); document.cookie = "email=user@email.com; expires=" + expiryDate + ";";
ออบเจ็กต์ document.cookie รองรับการตั้งค่าอายุสูงสุดของคุกกี้ หรือ Max-Age ซึ่งระบุระยะเวลาที่คุกกี้ควรใช้งานได้ก่อนที่จะหมดอายุ แม้ว่าทุกเบราว์เซอร์จะไม่รองรับ แต่ก็ช่วยให้คุณสร้างคุกกี้ที่หมดอายุได้โดยง่ายขึ้นอยู่กับเวลาที่ผู้ใช้เริ่มสร้างคุกกี้:
const expiryDate= 24 * 60 * 60 * 2; document.cookie = "email=user@email.com; max-age=" + expiryDate + ";";
นี้จะสร้างคุกกี้ที่หมดอายุหลังจากสองวัน
การอัปเดตและการลบคุกกี้
ไม่มีฟังก์ชันที่ใช้ในการอัปเดตหรือลบคุกกี้ คุณทำการเปลี่ยนแปลงวัตถุ "document.cookie" แทน
คุณสามารถอัปเดตคุกกี้ได้ด้วยวิธีเดียวกับที่คุณสร้าง:
document.cookie = "email=user@email.app;"
การดำเนินการนี้จะเปลี่ยนค่าของ "อีเมล" จาก "user@email.com" เป็น "user@email.app"
การลบคุกกี้ใช้วิธีที่คล้ายกัน สิ่งที่คุณต้องทำคือใช้รูปแบบเดียวกับที่ใช้ในการสร้างหรืออัปเดตคุกกี้ แต่ลบค่าที่กำหนดให้กับคุกกี้:
document.cookie = "email=; expires=Wed, 24 Jun 2019 12:00:00 UTC; path/;"
คุณควรระบุเส้นทางเพื่อให้แน่ใจว่าคุณลบคุกกี้ที่ถูกต้อง
ประเภทของคุกกี้
ราสเบอร์รี่. ชอคโกแลตชิป. ฟัดจ์. ไม่ ไม่ใช่คุกกี้ประเภทนั้น! ในเบราว์เซอร์ มีคุกกี้สามประเภทหลัก:เซสชัน บุคคลที่สาม และถาวร
คุกกี้เซสชันคือคุกกี้ที่มีอยู่จนกว่าเบราว์เซอร์จะปิด คุกกี้เหล่านี้เป็นคุกกี้ที่ตั้งค่าไม่มีวันหมดอายุ เช่นเดียวกับในตัวอย่างแรกของเรา เป็นที่น่าสังเกตว่านักพัฒนาบางคนใช้คำว่า "คุกกี้เซสชัน" เพื่ออ้างถึงคุกกี้ใด ๆ ที่รับรองความถูกต้องของผู้ใช้ แต่คุกกี้ของเซสชันไม่ใช่คุกกี้เดียวที่คุณสามารถใช้สำหรับการรับรองความถูกต้อง
คุกกี้ถาวรคือคุกกี้ที่มีอยู่แม้ในขณะที่ปิดเบราว์เซอร์ คุกกี้เหล่านี้เป็นคุกกี้ที่มีวันหมดอายุที่กำหนดไว้
คุกกี้บุคคลที่สามคือคุกกี้ที่สร้างขึ้นโดยเว็บไซต์อื่น ตัวอย่างนี้คือคุกกี้ Google Analytics หากคุณติดตั้ง Google Analytics บนไซต์ของคุณ ส่วนขยายจะสามารถตั้งค่าคุกกี้เพื่อติดตามผู้ใช้ได้
บทสรุป
คุกกี้เป็นวิธีที่สะดวกในการจัดเก็บข้อมูลผู้ใช้ในเบราว์เซอร์ มักใช้เพื่อติดตามว่าผู้ใช้เคยเข้าชมไซต์มาก่อนและเพื่อจัดเก็บคุกกี้การตรวจสอบสิทธิ์หรือไม่
คุกกี้มีสามประเภทหลัก:เซสชัน ถาวร และบุคคลที่สาม สำหรับแอปพลิเคชันของคุณเอง คุณจะเน้นที่การใช้เซสชันและคุกกี้ถาวรเป็นหลัก
