คุกกี้จาวาสคริปต์

สารบัญ

    แสดงสารบัญ

คุกกี้ช่วยให้คุณจัดเก็บข้อมูลผู้ใช้ในหน้าเว็บ

คุกกี้คืออะไร?

คุกกี้คือข้อมูลที่จัดเก็บไว้ในไฟล์ข้อความขนาดเล็กบนคอมพิวเตอร์ของคุณ

เมื่อเว็บเซิร์ฟเวอร์ส่งเว็บเพจไปยังเบราว์เซอร์ การเชื่อมต่อก็จะเป็นเช่นนั้น ปิดตัวลงและเซิร์ฟเวอร์จะลืมทุกอย่างเกี่ยวกับผู้ใช้

คุกกี้ถูกคิดค้นขึ้นเพื่อแก้ปัญหา "วิธีจำข้อมูลเกี่ยวกับ ผู้ใช้งาน":

  • เมื่อผู้ใช้เยี่ยมชมหน้าเว็บ ชื่อของเขา/เธอจะถูกเก็บไว้ในคุกกี้

  • ครั้งถัดไปที่ผู้ใช้เยี่ยมชมเพจ คุกกี้จะ "จดจำ" ชื่อของเขา/เธอ

คุกกี้จะถูกบันทึกเป็นคู่ชื่อ-ค่า เช่น:

username = John Doe

เมื่อเบราว์เซอร์ร้องขอเว็บเพจจากเซิร์ฟเวอร์ คุกกี้ของเพจนั้นจะถูกเพิ่มเข้าไปในคำขอ ทางเซิร์ฟเวอร์นี้ รับข้อมูลที่จำเป็นเพื่อ "จดจำ" ข้อมูลเกี่ยวกับผู้ใช้

ตัวอย่างด้านล่างนี้จะไม่ทำงานหากเบราว์เซอร์ของคุณปิดการรองรับคุกกี้ในเครื่อง

สร้างคุกกี้ด้วย JavaScript

JavaScript สามารถสร้าง อ่าน และลบคุกกี้ด้วย document.cookie คุณสมบัติ.

ด้วย JavaScript คุณสามารถสร้างคุกกี้ได้ดังนี้:

document.cookie = "username=John Doe";

คุณยังสามารถเพิ่มวันหมดอายุได้ (ตามเวลา UTC) ตามค่าเริ่มต้น คุกกี้จะถูกลบเมื่อปิดเบราว์เซอร์:

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";

ด้วยพารามิเตอร์เส้นทาง คุณสามารถบอกเบราว์เซอร์ได้ว่าคุกกี้นั้นอยู่ในเส้นทางใด ตามค่าเริ่มต้น คุกกี้จะอยู่ในหน้าปัจจุบัน

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

อ่านคุกกี้ด้วย JavaScript

ด้วย JavaScript คุกกี้สามารถอ่านได้ดังนี้:

let x = document.cookie;

document.cookie จะส่งคืนคุกกี้ทั้งหมดในสตริงเดียว เช่น: cookie1=value; cookie2=ค่า; cookie3=ค่า;

เปลี่ยนคุกกี้ด้วย JavaScript

ด้วย JavaScript คุณสามารถเปลี่ยนคุกกี้ได้ในลักษณะเดียวกับที่คุณสร้าง:

document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

คุกกี้เก่าถูกเขียนทับ

ลบคุกกี้ด้วย JavaScript

การลบคุกกี้นั้นง่ายมาก

คุณไม่จำเป็นต้องระบุค่าคุกกี้เมื่อคุณลบคุกกี้

เพียงตั้งค่าพารามิเตอร์หมดอายุเป็นวันที่ที่ผ่านมา:

document.cookie = "username=; expires=Thu, 01 
Jan 1970 00:00:00 UTC; path=/;";

คุณควรกำหนดเส้นทางคุกกี้เพื่อให้แน่ใจว่าคุณลบคุกกี้ที่ถูกต้อง

เบราว์เซอร์บางตัวจะไม่อนุญาตให้คุณลบคุกกี้หากคุณไม่ได้ระบุเส้นทาง

สตริงคุกกี้

คุณสมบัติ document.cookie ดูเหมือนสตริงข้อความปกติ แต่มันไม่ใช่

แม้ว่าคุณจะเขียนสตริงคุกกี้ทั้งหมดลงใน document.cookie แต่เมื่อคุณอ่านอีกครั้ง คุณจะเห็นเพียงเท่านั้น คู่ชื่อ-ค่าของมัน

หากคุณตั้งค่าคุกกี้ใหม่ คุกกี้เก่าจะไม่ถูกเขียนทับ คุกกี้ใหม่จะถูกเพิ่มใน document.cookie ดังนั้นหากคุณอ่าน document.cookie อีกครั้งคุณจะได้รับสิ่งที่ชอบ:

cookie1=ค่า; cookie2=ค่า;

หากคุณต้องการค้นหาค่าของคุกกี้ที่ระบุ คุณต้องเขียน JavaScript ฟังก์ชั่นที่ค้นหาค่าคุกกี้ในสตริงคุกกี้

ตัวอย่างคุกกี้จาวาสคริปต์

ในตัวอย่างต่อไปนี้ เราจะสร้างคุกกี้ที่เก็บชื่อของผู้เข้าชม

ครั้งแรกที่ผู้เยี่ยมชมมาถึงหน้าเว็บ เขา/เธอจะถูกขอให้กรอกชื่อของเขา/เธอ จากนั้นชื่อจะถูกเก็บไว้ในคุกกี้

ครั้งถัดไปที่ผู้เยี่ยมชมมาถึงหน้าเดียวกัน เขา/เธอจะได้รับข้อความต้อนรับ

สำหรับตัวอย่าง เราจะสร้างฟังก์ชัน JavaScript 3 รายการ:

  1. ฟังก์ชันสำหรับตั้งค่าคุกกี้

  2. ฟังก์ชั่นเพื่อรับค่าคุกกี้

  3. ฟังก์ชั่นตรวจสอบค่าคุกกี้

ฟังก์ชั่นการตั้งค่าคุกกี้

ขั้นแรก เราสร้าง ฟังก์ชัน ที่เก็บชื่อของผู้เข้าชมไว้ในตัวแปรคุกกี้:

ตัวอย่าง

function setCookie(cname, cvalue, exdays) {
   const d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  let expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

ตัวอย่างที่อธิบาย:

พารามิเตอร์ของฟังก์ชันด้านบนคือชื่อของคุกกี้ (cname) ค่าของคุกกี้ (cvalue) และจำนวนวันที่คุกกี้จะหมดอายุ (exdays)

ฟังก์ชั่นตั้งค่าคุกกี้โดยเพิ่มชื่อคุกกี้ คุกกี้เข้าด้วยกัน ค่าและสตริงที่หมดอายุ

ฟังก์ชั่นในการรับคุกกี้

จากนั้น เราสร้าง ฟังก์ชัน ที่ส่งคืนค่าของคุกกี้ที่ระบุ:

ตัวอย่าง

function getCookie(cname) {
   
let name = cname + "=";
   
let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i <ca.length; i++) {
      let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
      
 }
      if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
      }
    }
    return "";
}

คำอธิบายฟังก์ชัน:

ใช้ชื่อคุกกี้เป็นพารามิเตอร์ (cname)

สร้างตัวแปร (ชื่อ) พร้อมข้อความที่จะค้นหา (cname + "=")

ถอดรหัสสตริงคุกกี้ เพื่อจัดการคุกกี้ด้วยอักขระพิเศษ เช่น '$'

แยก document.cookie บนอัฒภาคออกเป็นอาร์เรย์ที่เรียกว่า ca (ca = decodedCookie.split(';'))

วนซ้ำอาร์เรย์ ca (i=0; i < ca.length; i++) และอ่านค่าแต่ละค่า ค=แคลิฟอร์เนีย[i])

หากพบคุกกี้ (c.indexOf(name) == 0) ให้ส่งคืนค่าของคุกกี้ (c.substring(name.length, c.length)

หากไม่พบคุกกี้ ให้ส่งคืน ""

ฟังก์ชั่นตรวจสอบคุกกี้

สุดท้าย เราสร้างฟังก์ชันที่ตรวจสอบว่ามีการตั้งค่าคุกกี้หรือไม่

หากตั้งค่าคุกกี้ก็จะแสดงคำทักทาย

หากไม่ได้ตั้งค่าคุกกี้ ก็จะแสดงกล่องข้อความถามชื่อผู้ใช้ และจัดเก็บคุกกี้ชื่อผู้ใช้เป็นเวลา 365 วัน โดยการเรียกใช้ฟังก์ชัน setCookie:

ตัวอย่าง

function checkCookie() {
  let 
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) {
  const d = new Date();
   
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  let expires = "expires="+d.toUTCString();
  document.cookie = cname + "=" + cvalue + 
";" + expires + ";path=/";
}
function getCookie(cname) {
  let name = cname + "=";
    let ca 
= document.cookie.split(';');
  for(let i = 0; i < ca.length; i++) 
{
    
let 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() {
  let user = getCookie("username");
  if (user != "") 
{
    alert("Welcome again " + user);
  } else {
    user = prompt("Please enter your name:", "");
      if (user != "" && 
user != null) {
      setCookie("username", user, 365);
      }
  }
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<script>
function setCookie(cname,cvalue,exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  let expires = "expires=" + d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i < ca.length; i++) {
    let 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() {
  let user = getCookie("username");
  if (user != "") {
    alert("Welcome again " + user);
  } else {
     user = prompt("Please enter your name:","");
     if (user != "" && user != null) {
       setCookie("username", user, 30);
     }
  }
}
</script>
</head>

<body onload="checkCookie()"></body>

</html>

ตัวอย่างข้างต้นเรียกใช้ฟังก์ชัน checkCookie() เมื่อโหลดหน้าเว็บ