JavaScript โค๊กกี้
- หน้าก่อนหน้า JS Timing
- หน้าต่อไป สัมมาธิษฐาน Web API โดยสรุป
ค๊อกกี้ทำให้คุณสามารถเก็บข้อมูลผู้ใช้ในหน้าเว็บ
ค๊อกกี้คืออะไร?
ค๊อกกี้เป็นข้อมูลที่ถูกเก็บบนคอมพิวเตอร์ของคุณในแบบไฟล์ข้อความเล็กๆ
หลังจากเซิร์ฟเวอร์ส่งหน้าเว็บไปยังบราวเซอร์แล้ว การเชื่อมต่อจะถูกปิด และเซิร์ฟเวอร์จะลืมทุกอย่างเกี่ยวกับผู้ใช้
ค๊อกกี้ถูกคิดค้นขึ้นมาเพื่อแก้ปัญหา "จะจำได้ข้อมูลผู้ใช้ได้อย่างไร"
- เมื่อผู้ใช้เข้าเว็บไซต์ ชื่อของเขาสามารถเก็บไว้ในค๊อกกี้
- ครั้งที่ผู้ใช้เข้าเว็บไซต์อีกครั้ง ค๊อกกี้จะ "จำได้" ชื่อของเขา
ค๊อกกี้จะถูกเก็บเป็นคู่ชื่อค่า เช่น:
username = Bill Gates
เมื่อบราวเซอร์ขอหน้าเว็บจากเซิร์ฟเวอร์ ค๊อกกี้ที่เนอร์จากหน้าเว็บนั้นจะถูกเพิ่มไปที่คำขอนี้ ดังนั้นเซิร์ฟเวอร์จึงได้รับข้อมูลที่จำเป็นเพื่อ "จำได้" ข้อมูลของผู้ใช้
ถ้าบราวเซอร์ปิดการสนับสนุนค๊อกกี้ท้องถิ่น ตัวอย่างดังกล่าวจะไม่ทำงาน
สร้างค๊อกกี้ด้วย JavaScript
JavaScript สามารถใช้ document.cookie นับถือการสร้าง อ่าน และลบค๊อกกี้
ด้วย JavaScript คุณสามารถสร้างค๊อกกี้ได้เช่นนี้:
document.cookie = "username=Bill Gates";
คุณยังสามารถเพิ่มวันที่หมดอายุ (เวลา UTC) ได้เช่นกัน โดยมาตรฐาน ค๊อกกี้จะถูกลบเมื่อบราวเซอร์ปิด:
document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC";
ด้วย path ตัวเลือก คุณสามารถบอกเบราวเซอร์ว่า cookie อยู่ในทางทางเดินใดๆ โดยเริ่มต้นค่าเดฟาลท์คือหน้าปัจจุบัน。
document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
อ่านค่า cookie ด้วย JavaScript
ด้วย JavaScript คุณสามารถอ่านค่า cookie ได้นี้:
var x = document.cookie;
document.cookie จะกลับค่าทั้งหมดของ cookie ในข้อความเดียว ตัวอย่างเช่น: cookie1=value; cookie2=value; cookie3=value;
เปลี่ยนค่า cookie ด้วย JavaScript
ด้วยการใช้ JavaScript คุณสามารถเปลี่ยนค่า cookie ได้เหมือนที่คุณสร้างค่า cookie ได้:
document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
cookie ที่เก่าจะถูกทำลาย
ลบ cookie ด้วย JavaScript
การลบ cookie มีความง่าย
ไม่จำเป็นต้องระบุค่า cookie ในการลบ cookie
ใส่ expires ตั้งค่าประกายเป็นวันที่ที่ผ่านมาเพื่อลบคุณเท่านั้น:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
คุณควรกำหนดทางทางเดินของ cookie ในการลบ cookie ที่ถูกต้อง。
ถ้าคุณไม่ระบุทางทางเดิน บางเบราวเซอร์จะไม่อนุญาตให้คุณลบ cookie。
ข้อความ Cookie
document.cookie ตัวแปรดูเหมือนข้อความสั้นๆ ที่ปกติ แต่มันไม่ใช่นั้น。
แม้ว่าคุณจะส่ง document.cookie เขียน cookie ข้อความสั้นๆ ที่สมบูรณ์ ตอนที่คุณเรียกดูอีกครั้งคุณจะเห็นเพียงชื่อ-ค่าของมันเท่านั้น。
ถ้าได้ตั้งค่า cookie ใหม่ คุณจะไม่ทำลาย cookie ที่เก่าได้ คุณจะเพิ่ม Cookie ใหม่เข้าไปใน document.cookie ดังนั้นหากคุณเรียกดู document.cookie คุณจะได้ข้อมูลเช่นนี้:
cookie1 = value; cookie2 = value;
ถ้าคุณต้องการหาค่า cookie ที่กำหนด คุณจะต้องเขียนฟังก์ชัน JavaScript ในการค้นหาค่า cookie ในตัวอักษร cookie
ตัวอย่างตัวอักษร JavaScript Cookie
ในตัวอย่างด้านล่างนี้ พวกเราจะสร้าง cookie ที่จะเก็บชื่อผู้เข้าชม
ในครั้งที่ผู้เข้าชมมายังหน้าเว็บครั้งแรก พวกเขาจะถูกขอกรอกชื่อ แล้วจะเก็บชื่อนี้ไว้ใน cookie
ในครั้งต่อไปที่ผู้เข้าชมมายังหน้าเดียวกัน พวกเขาจะได้รับข้อความต้อนรับ
เช่น จะสร้าง 3 ฟังก์ชัน JavaScript:
- ฟังก์ชันที่ใช้ในการตั้งค่าค่า cookie
- ฟังก์ชันที่ใช้ในการขอค่า cookie
- ฟังก์ชันที่ใช้ในการตรวจสอบค่า cookie
ฟังก์ชันที่ใช้ในการตั้งค่า cookie
เบื้องต้น พวกเราสร้างฟังก์ชันเพื่อเก็บชื่อผู้เข้าชมในตัวแปร cookie:
ตัวอย่าง
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
การอธิบายตัวอย่าง:
ตัวแปรของฟังก์ชันนี้คือ: ชื่อ cookie (cname), ค่า cookie (cvalue), และจำนวนวันที่ทราบว่า cookie จะหมดอายุ (exdays)
ฟังก์ชันนี้จะตั้งค่า cookie โดยเข้าร่วมชื่อ cookie ค่า cookie และตัวอักษรสิ้นสุดที่ทราบว่า cookie จะหมดอายุ
ฟังก์ชันที่ใช้ในการขอค่า cookie
จากนั้น พวกเราสร้างฟังก์ชันเพื่อกลับค่า cookie ที่กำหนด:
ตัวอย่าง
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
การอธิบายฟังก์ชัน:
ใช้ cookie ในฐานะตัวแปร (cname)
สร้างตัวแปร (name) และข้อความที่ต้องการค้นหา (CNAME”=”)
เปิดรหัสตัวอักษรสั้น cookie จัดการ cookie ที่มีอักษรพิเศษ เช่น “$”
แบ่ง document.cookie ด้วยสัญญาณประกาศข้อความ (;) แล้วเก็บไว้ในตัวแปร ca (decodedCookie.split(';'))
เรียกค่าในแนวทาง ca ตัวแปร (i = 0; i < ca.length; i++) แล้วอ่านค่าตัวแปร c = ca[i]
ถ้าพบ cookie (c.indexOf(name) == 0) ก็จะคืนค่าของ cookie (c.substring(name.length, c.length))
ถ้าไม่พบ cookie ก็จะคืนค่า ""
ฟังก์ชันตรวจสอบ cookie
สุดท้าย สร้างฟังก์ชันเพื่อตรวจสอบว่า cookie ได้ถูกตั้งค่าหรือไม่
ถ้าได้ตั้งค่า cookie จะแสดงข้อความต้อนรับ
ถ้ายังไม่ได้ตั้งค่า cookie จะแสดงข้อความเตือนขอใช้งานชื่อผู้ใช้ และบันทึกชื่อผู้ใช้ cookie ตลอด 365 วัน ด้วยการเรียก setCookie ฟังก์ชัน：
ตัวอย่าง
function checkCookie() {
var username = getCookie("username");
if (username != "") {
alert("Welcome again " + username);
}
username = prompt("Please enter your name:", "");
if (username != "" && username != null) {
setCookie("username", username, 365);
}
}
}
ตอนนี้เรียกมาด้วยกัน
ตัวอย่าง
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var 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() {
var user = getCookie("username");
if (user != "") {
alert("Welcome again " + user);
}
user = prompt("Please enter your name:", "");
if (user != "" && user != null) {
setCookie("username", user, 365);
}
}
}
ตัวอย่างดังกล่าวจะทำงาน checkCookie() ฟังก์ชันหลังจากที่หน้าเว็บจะโหลด
- หน้าก่อนหน้า JS Timing
- หน้าต่อไป สัมมาธิษฐาน Web API โดยสรุป
