Cookies ช่วยให้คุณสามารถจัดเก็บข้อมูลของผู้ใช้ในหน้าเว็บ
อะไรคือ Cookies ?
Cookies เป็นข้อมูลที่เก็บไว้ในไฟล์ข้อความขนาดเล็กในคอมพิวเตอร์ของคุณ
เมื่อเว็บเซิร์ฟเวอร์ได้ส่งหน้าเว็บเบราว์เซอร์, การเชื่อมต่อจะปิดตัวลงและเซิร์ฟเวอร์ลืมทุกอย่างที่เกี่ยวกับผู้ใช้
Cookies ถูกคิดค้นขึ้นมาเพื่อแก้ปัญหา "วิธีการจดจำข้อมูลเกี่ยวกับผู้ใช้":
- เมื่อผู้ใช้เข้าชมหน้าเว็บที่ชื่อของเขาจะถูกเก็บไว้ใน cookie
- ครั้งต่อไปที่ผู้ใช้เข้าชมหน้าเว็บที่ cookie "จำ" ชื่อของเขา
คุกกี้จะถูกบันทึกไว้ในคู่ค่าชื่อที่ชอบ:
username = John Doe
เมื่อมีการร้องขอเบราว์เซอร์หน้าเว็บจากเซิร์ฟเวอร์ cookies ที่อยู่ในหน้าเว็บถูกเพิ่มลงในการร้องขอ วิธีนี้เซิร์ฟเวอร์ที่ได้รับข้อมูลที่จำเป็นที่จะ "จำ" ข้อมูลเกี่ยวกับผู้ใช้
สร้าง a Cookie ด้วย JavaScript
JavaScript สามารถสร้างอ่านและลบ cookies กับ document.cookie คุณสมบัติ
ด้วย JavaScript, a cookie สามารถสร้างขึ้นเช่นนี้
document.cookie = "username=John Doe";นอกจากนี้คุณยังสามารถเพิ่มวันหมดอายุ (ในเวลา UTC) โดยค่าเริ่มต้น the cookie จะถูกลบเมื่อเบราว์เซอร์ที่มีการปิด:
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";ด้วยพารามิเตอร์เส้นทางที่คุณสามารถบอกสิ่งที่เบราว์เซอร์เส้นทาง the cookie เป็น โดยค่าเริ่มต้น the cookie เป็นหน้าปัจจุบัน
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";อ่าน a Cookie ด้วย JavaScript
ด้วย JavaScript, cookies สามารถอ่านได้เช่นนี้
var x = document.cookie;document.cookie จะกลับมาทุก cookies ในหนึ่งสายเหมือน: cookie1=value; cookie2=value; cookie3=value; cookie1=value; cookie2=value; cookie3=value;
เปลี่ยน a Cookie ด้วย JavaScript
ด้วย JavaScript คุณสามารถเปลี่ยน a cookie วิธีเดียวกับที่คุณสร้างมันขึ้นมา:
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
เก่า cookie จะถูกเขียนทับ
ลบ a Cookie ด้วย JavaScript
การลบ a cookie เป็นเรื่องง่ายมาก เพียงแค่ตั้งค่าพารามิเตอร์หมดอายุไปเป็นวันที่ผ่าน:
document.cookie = "username=; expires=Thu, 01
Jan 1970 00:00:00 UTC";
โปรดทราบว่าคุณไม่ได้มีการระบุ a cookie ค่าเมื่อคุณลบ a cookie
Cookie สตริง
document.cookie คุณสมบัติดูเหมือนสตริงข้อความปกติ แต่มันเป็นไปไม่ได้
แม้ว่าคุณจะเขียนทั้ง cookie สตริง document.cookie เมื่อคุณอ่านมันออกมาอีกครั้งคุณสามารถเห็นเฉพาะคู่ค่าชื่อของมัน
หากคุณตั้งค่าใหม่ cookie เก่า cookies จะไม่ถูกเขียนทับ ใหม่ cookie จะถูกเพิ่ม document.cookie ดังนั้นหากคุณอ่าน document.cookie อีกครั้งคุณจะได้รับสิ่งที่ต้องการ:
cookie1 = value; cookie2 = value;
หากคุณต้องการที่จะหาค่าของหนึ่งระบุ cookie , คุณต้องเขียนฟังก์ชัน JavaScript ที่ค้นหาสำหรับ cookie ค่าใน cookie สตริง
JavaScript Cookie ตัวอย่าง
ในตัวอย่างที่จะปฏิบัติตามเราจะสร้าง a cookie ที่เก็บชื่อของผู้เข้าชม
เป็นครั้งแรกที่มาถึงผู้เข้าชมไปยังหน้าเว็บที่เขาจะถูกขอให้กรอกข้อมูลลงในชื่อของเขา ชื่อนี้จะถูกเก็บไว้ใน a cookie
ครั้งต่อไปที่ผู้เข้าชมมาถึงที่หน้าเดียวกันเขาจะได้รับข้อความต้อนรับ
ตัวอย่างเช่นเราจะสร้างฟังก์ชั่นจาวาสคริปต์ที่ 3:
- ฟังก์ชั่นการตั้งค่า cookie ค่า
- ฟังก์ชั่นที่จะได้รับ cookie ค่า
- ฟังก์ชั่นเพื่อตรวจสอบ cookie ค่า
ฟังก์ชั่นตั้งค่า a Cookie
ครั้งแรกที่เราสร้างฟังก์ชันที่เก็บชื่อของผู้เข้าชมในที่ a 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;
}
ตัวอย่างอธิบายว่า:
พารามิเตอร์ของฟังก์ชันดังกล่าวเป็นชื่อของ cookie (cname) ค่าของ the cookie (cvalue) และจำนวนของวันจนกว่าคุกกี้ควรหมดอายุ (exdays)
ฟังก์ชั่นชุด a cookie โดยการเพิ่มร่วมกัน cookiename , the cookie ค่าและหมดอายุสตริง
ฟังก์ชั่นได้รับ a Cookie
จากนั้นเราจะสร้างฟังก์ชั่นที่ส่งกลับค่าของที่ระบุ cookie :
ตัวอย่าง
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 "";
}
ฟังก์ชั่นอธิบายว่า:
ใช้ the cookiename เป็นพารามิเตอร์ (CNAME)
สร้างตัวแปร (ชื่อ) ที่มีข้อความในการค้นหา (CNAME + "=")
Split document.cookie ในอัฒภาคเป็นอาร์เรย์เรียกว่า ca (ca = document.cookie.split(';'))
ห่วงผ่านแคลิฟอร์เนีย array (i=0;i<ca.length;i++) และอ่านออกแต่ละค่า c=ca[i])
หาก the cookie พบ (c.indexOf(name) == 0) กลับค่าของ the cookie (c.substring(name.length,c.length)
ถ้า the cookie ไม่พบกลับ ""
ฟังก์ชั่นตรวจสอบ a Cookie
ที่ผ่านมาเราสร้างฟังก์ชันที่ checks ถ้า a cookie ถูกตั้งค่า
หาก the cookie ถูกตั้งค่าก็จะแสดงคำอวยพร
ถ้า the cookie ไม่ได้ตั้งค่าก็จะแสดงกล่องพรอมต์ถามหาชื่อของผู้ใช้และเก็บชื่อผู้ใช้ cookie เป็นเวลา 365 วันโดยการเรียก setCookie ฟังก์ชั่น:
ตัวอย่าง
function checkCookie() {
var
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) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue +
"; " + expires;
}
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);
} else {
user = prompt("Please enter your name:", "");
if (user != "" &&
user != null) {
setCookie("username", user, 365);
}
}
} ลองตัวเอง» ตัวอย่างข้างต้นทำงาน checkCookie() ฟังก์ชั่นเมื่อโหลดหน้าเว็บ