คุณสมบัติคุกกี้ HTML DOM ใช้สำหรับสร้าง อ่าน และลบคุกกี้ เว็บไซต์ใช้คุกกี้เพื่อติดตามข้อมูลเฉพาะของผู้ใช้ เมธอดนี้มีประเภทส่งคืนของสตริงที่มีรายการคุกกี้ทั้งหมดคั่นด้วยเครื่องหมายอัฒภาค คุกกี้อยู่ในรูปแบบคู่คีย์=ค่า คุกกี้จะถูกลบทันทีที่ปิดเบราว์เซอร์ แต่คุณสามารถระบุวันหมดอายุได้
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติคุกกี้ -
document.cookie = newCookie
ที่นี่ newCookie เป็นประเภทสตริงและเป็นรายการที่คั่นด้วยเครื่องหมายอัฒภาคของคู่ชื่อ-ค่า ต่อไปนี้เป็นค่าทางเลือกสำหรับ newCookie
| ค่าพารามิเตอร์ | คำอธิบาย |
|---|---|
| หมดอายุ=วันที่ | ระบุวันที่ในรูปแบบ GMT โดยค่าเริ่มต้น คุกกี้จะถูกลบทันทีที่ปิดเบราว์เซอร์ |
| เส้นทาง=เส้นทาง: | เพื่อระบุเส้นทางไดเรกทอรีบนคอมพิวเตอร์ที่จะจัดเก็บคุกกี้ เฉพาะเส้นทางที่แน่นอนเท่านั้นที่จะใช้ . |
| domain=domainname | เพื่อระบุโดเมนของเว็บไซต์ของคุณ โดเมนเอกสารปัจจุบันที่ใช้หากไม่ระบุ |
| ปลอดภัย | การบอกให้เบราว์เซอร์ใช้โปรโตคอล https เพื่อส่งคุกกี้ไปยังเซิร์ฟเวอร์ |
ตัวอย่าง
ให้เราดูตัวอย่างคุณสมบัติคุกกี้ HTML DOM -
<!DOCTYPE html>
<html>
<body>
<h1>javascript COOKIE example</h1>
<p>Click the below button to create a cookie</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 ซึ่งจะเรียกใช้ฟังก์ชัน createCookie() เมื่อผู้ใช้คลิก -
<button type="button" onclick="cookieCreate()">CREATE</button>
ฟังก์ชัน cookieCreate() สร้างคุกกี้โดยใช้คุณสมบัติคุกกี้ของวัตถุเอกสาร จากนั้นเราตั้งค่าคู่คีย์ของคุกกี้ที่คั่นด้วยอัฒภาค คุกกี้ที่สร้างจะแสดงในย่อหน้าด้วยรหัส "ตัวอย่าง" โดยใช้คุณสมบัติ 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;
} 