คุณสมบัติ HTML DOM cookie ใช้สำหรับสร้าง อ่าน และลบคุกกี้ (cookies) คุกกี้ถูกใช้โดยเว็บไซต์เพื่อติดตามข้อมูลเฉพาะผู้ใช้ วิธีนี้มีประเภทการคืนค่าเป็น string ที่มีรายการคุกกี้ทั้งหมดคั่นด้วยเซมิโคลอน คุกกี้อยู่ในรูปแบบคู่ key=value คุกกี้จะถูกลบทันทีที่ปิดเบราว์เซอร์ แต่คุณสามารถระบุวันหมดอายุสำหรับมันได้
ไวยากรณ์
ไวยากรณ์สำหรับ -
การตั้งค่าคุณสมบัติ cookie -
document.cookie = newCookie
ที่นี่ newCookie เป็นประเภท string และเป็นรายการคู่ name-value คั่นด้วยเซมิโคลอน ค่าทางเลือกต่อไปนี้สำหรับ newCookie
| ค่าพารามิเตอร์ | คำอธิบาย |
|---|---|
| expires=date | เพื่อระบุวันที่ในรูปแบบ GMT โดยค่าเริ่มต้นคุกกี้จะถูกลบทันทีที่ปิดเบราว์เซอร์ |
| path=path: | เพื่อระบุเส้นทางไดเรกทอรีบนคอมพิวเตอร์ที่คุกกี้จะถูกเก็บ ต้องใช้ absolute path เท่านั้น |
| domain=domainname | เพื่อระบุโดเมนของเว็บไซต์ของคุณ โดเมนของเอกสารปัจจุบันจะถูกใช้หากไม่ระบุ |
| Secure | เพื่อบอกเบราว์เซอร์ให้ใช้โปรโตคอล https สำหรับส่งคุกกี้ไปยังเซิร์ฟเวอร์ |
ตัวอย่าง
ลองดูตัวอย่างสำหรับคุณสมบัติ HTML DOM cookie -
<!DOCTYPE html> <html> <body> <h1>javascript COOKIE example</h1> <p>คลิกปุ่มด้านล่างเพื่อสร้างคุกกี้</p> <button type="button" onclick="cookieCreate()">CREATE</button> <p id="Sample"></p> <script> function cookieCreate(){ var x = document.cookie; x = "username=Matt;class=prior;location=USA;expires=Wed, 10 July 2019 12:00:00 UTC"; document.getElementById("Sample").innerHTML = "The cookie values are: " + x; } </script> </body> </html>
ผลลัพธ์
จะได้ผลลัพธ์ดังนี้ -
เมื่อคลิกปุ่ม CREATE -
ในตัวอย่างข้างต้น -
เราสร้างปุ่ม CREATE ที่จะเรียกใช้ฟังก์ชัน createCookie() เมื่อผู้ใช้คลิก -
<button type="button" onclick="cookieCreate()">CREATE</button>
ฟังก์ชัน cookieCreate() สร้างคุกกี้โดยใช้คุณสมบัติ cookie ของอ็อบเจกต์เอกสาร เราจึงตั้งค่าคู่ key-pair ของคุกกี้ที่คั่นด้วยเซมิโคลอน คุกกี้ที่สร้างจึงถูกแสดงในย่อหน้าที่มี id "Sample" โดยใช้คุณสมบัติ innerHTML -
function cookieCreate(){ var x = document.cookie; x = "username=Matt;class=prior;location=USA;expires=Wed, 10 July 2019 12:00:00 UTC"; document.getElementById("Sample").innerHTML = "The cookie values are: " + x; }
