Cookies | Office.in.th

Cookies: ขนมหวาน (และข้อมูล) ในโลกของเว็บ

จากบทที่แล้วที่เราได้ทำความรู้จักกับ Local Storage และ Session Storage ซึ่งเป็น Web Storage APIs ที่ใช้เก็บข้อมูลใน Browser คราวนี้เราจะมาเจาะลึกอีกหนึ่งทางเลือกที่เก่าแก่กว่า แต่ก็ยังคงมีความสำคัญอยู่ นั่นก็คือ Cookies ครับ

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

การสร้างและอ่าน Cookies

การทำงานกับ Cookies ใน JavaScript ค่อนข้างตรงไปตรงมา เราจะใช้ `document.cookie` เพื่อสร้าง, อ่าน, และแก้ไข Cookies

การสร้าง Cookie

ในการสร้าง Cookie เราจะกำหนดค่าให้กับ `document.cookie` โดยใช้รูปแบบ `name=value; expires=date; path=path` แต่ละส่วนมีความหมายดังนี้:

name: ชื่อของ Cookie
value: ค่าของ Cookie
expires: วันหมดอายุของ Cookie (ไม่บังคับ)
path: พาธที่ Cookie สามารถใช้งานได้ (ไม่บังคับ)

ตัวอย่าง:

// สร้าง Cookie ที่ชื่อ 'username' มีค่า 'john_doe' และหมดอายุใน 7 วัน
const d = new Date();
d.setTime(d.getTime() + (7*24*60*60*1000)); // 7 วัน
let expires = "expires="+ d.toUTCString();
document.cookie = "username=john_doe;" + expires + ";path=/";

// หรือเขียนแบบย่อได้ดังนี้ (แต่ไม่แนะนำเพราะอ่านยาก)
// document.cookie = "username=john_doe;expires=" + d.toUTCString() + ";path=/";

ในตัวอย่างนี้ เราสร้าง Cookie ชื่อ `username` ให้มีค่าเป็น `john_doe` และกำหนดให้หมดอายุในอีก 7 วันข้างหน้า นอกจากนี้เรายังกำหนด `path` เป็น `/` ซึ่งหมายความว่า Cookie นี้สามารถใช้งานได้ในทุกหน้าของเว็บไซต์

ข้อควรระวัง: ค่าของ Cookie ควรถูกเข้ารหัส (encoded) หากมีอักขระพิเศษ เช่น ช่องว่าง หรือเครื่องหมายต่างๆ เพื่อป้องกันปัญหาในการอ่านค่า Cookie

// สร้าง Cookie โดยเข้ารหัสค่าด้วย encodeURIComponent()
let username = "john doe@example.com";
const d = new Date();
d.setTime(d.getTime() + (7*24*60*60*1000));
let expires = "expires="+ d.toUTCString();
document.cookie = "username=" + encodeURIComponent(username) + ";" + expires + ";path=/";

การอ่าน Cookie

ในการอ่าน Cookie เราจะใช้ `document.cookie` ซึ่งจะคืนค่าเป็นสตริงที่ประกอบด้วย Cookies ทั้งหมดที่ถูกจัดเก็บไว้สำหรับเว็บไซต์นั้นๆ แต่ละ Cookie จะถูกคั่นด้วยเครื่องหมาย ``;`

ตัวอย่าง:

// อ่าน Cookie ทั้งหมด
let cookies = document.cookie;
console.log(cookies); // อาจจะแสดงผลลัพธ์ประมาณนี้: "username=john_doe; theme=dark; lang=en"

เนื่องจาก `document.cookie` คืนค่าเป็นสตริง เราจะต้องทำการแยกวิเคราะห์ (parse) สตริงนั้นเพื่อดึงค่าของ Cookie ที่เราต้องการ

// ฟังก์ชันสำหรับดึงค่า Cookie ตามชื่อ
function getCookie(name) {
  let cookieName = name + "=";
  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(cookieName) == 0) {
      return c.substring(cookieName.length, c.length);
    }
  }
  return "";
}

// ใช้งานฟังก์ชัน getCookie()
let username = getCookie("username");
if (username != "") {
  alert("Welcome again " + username);
} else {
  username = prompt("Please enter your name:", "");
  if (username != "" && username != null) {
    // สร้าง Cookie (code จากตัวอย่างก่อนหน้า)
    const d = new Date();
    d.setTime(d.getTime() + (7*24*60*60*1000));
    let expires = "expires="+ d.toUTCString();
    document.cookie = "username=" + username + ";" + expires + ";path=/";
  }
}

ในตัวอย่างนี้ เราสร้างฟังก์ชัน `getCookie()` เพื่อดึงค่าของ Cookie ตามชื่อที่ระบุ ฟังก์ชันนี้จะทำการแยกวิเคราะห์สตริง `document.cookie` และคืนค่าของ Cookie ที่ตรงกับชื่อที่ระบุ หากไม่พบ Cookie จะคืนค่าเป็นสตริงว่างเปล่า

การแก้ไข Cookie

การแก้ไข Cookie ทำได้โดยการสร้าง Cookie ใหม่ที่มีชื่อเดิมและค่าใหม่ โดย Cookie ใหม่จะทำการแทนที่ Cookie เดิม

// แก้ไขค่า Cookie 'username' เป็น 'jane_doe'
const d = new Date();
d.setTime(d.getTime() + (7*24*60*60*1000));
let expires = "expires="+ d.toUTCString();
document.cookie = "username=jane_doe;" + expires + ";path=/";

การลบ Cookie

การลบ Cookie ทำได้โดยการสร้าง Cookie ใหม่ที่มีชื่อเดิมและกำหนด `expires` ให้เป็นวันที่ในอดีต Browser จะทำการลบ Cookie นั้นทันที

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

การกำหนด Expiration Date

การกำหนด expiration date เป็นสิ่งสำคัญในการจัดการ Cookies หากไม่ได้กำหนด expiration date Cookie จะเป็น Session Cookie ซึ่งจะถูกลบเมื่อ Browser ถูกปิด

เราสามารถกำหนด expiration date ได้โดยใช้ `expires` attribute และระบุวันที่และเวลาในรูปแบบ UTC (Coordinated Universal Time)

ตัวอย่าง:

// กำหนดให้ Cookie หมดอายุใน 1 ชั่วโมง
const d = new Date();
d.setTime(d.getTime() + (1*60*60*1000)); // 1 ชั่วโมง
let expires = "expires="+ d.toUTCString();
document.cookie = "exampleCookie=exampleValue;" + expires + ";path=/";

ข้อควรระวัง: การกำหนด expiration date ที่ยาวนานเกินไปอาจส่งผลเสียต่อความเป็นส่วนตัวของผู้ใช้ ควรพิจารณาถึงความจำเป็นในการเก็บข้อมูลและกำหนด expiration date ที่เหมาะสม

ข้อจำกัดของ Cookies

Cookies มีข้อจำกัดหลายประการที่ควรทราบ:

ขนาด: Cookies แต่ละ Cookie สามารถมีขนาดได้สูงสุด 4KB
จำนวน: Browser ส่วนใหญ่จำกัดจำนวน Cookies ที่สามารถจัดเก็บได้ต่อโดเมน
ความปลอดภัย: Cookies ไม่ได้ถูกเข้ารหัสโดยอัตโนมัติ ดังนั้นข้อมูลที่เก็บไว้ใน Cookies อาจถูกดักจับได้หากไม่มีการป้องกันที่เหมาะสม
ความเป็นส่วนตัว: Cookies สามารถถูกใช้เพื่อติดตามพฤติกรรมการท่องเว็บของผู้ใช้ ซึ่งอาจก่อให้เกิดความกังวลด้านความเป็นส่วนตัว

ข้อควรพิจารณา:

ใช้ Cookies อย่างระมัดระวัง: เก็บเฉพาะข้อมูลที่จำเป็นและหลีกเลี่ยงการเก็บข้อมูลส่วนตัวที่ละเอียดอ่อน
เข้ารหัสข้อมูล: เข้ารหัสข้อมูลที่เก็บไว้ใน Cookies เพื่อป้องกันการดักจับข้อมูล
ใช้ HTTPS: ใช้ HTTPS เพื่อเข้ารหัสการสื่อสารระหว่าง Browser และ Server
แจ้งให้ผู้ใช้ทราบ: แจ้งให้ผู้ใช้ทราบเกี่ยวกับการใช้งาน Cookies และให้ผู้ใช้มีสิทธิ์ในการควบคุมการใช้งาน Cookies

Cookies vs. Local Storage/Session Storage

ถึงแม้ว่า Cookies, Local Storage และ Session Storage จะมีจุดประสงค์เดียวกันคือการเก็บข้อมูลใน Browser แต่ก็มีความแตกต่างกันที่สำคัญ:

คุณสมบัติ	Cookies	Local Storage	Session Storage
ขนาด	4KB	5-10MB (ขึ้นอยู่กับ Browser)	5-10MB (ขึ้นอยู่กับ Browser)
อายุการใช้งาน	กำหนดได้ (Session หรือ Persistent)	Persistent (จนกว่าจะถูกลบ)	Session (จนกว่า Browser จะถูกปิด)
การเข้าถึงจาก Server	เข้าถึงได้ผ่าน HTTP Headers	เข้าถึงได้เฉพาะ JavaScript	เข้าถึงได้เฉพาะ JavaScript
ความซับซ้อน	ซับซ้อนกว่า	ง่ายกว่า	ง่ายกว่า

โดยทั่วไปแล้ว Local Storage และ Session Storage มักถูกเลือกใช้มากกว่า Cookies สำหรับการจัดเก็บข้อมูลฝั่ง Client เนื่องจากมีความจุที่มากกว่า, ใช้งานง่ายกว่า, และมีความปลอดภัยมากกว่า แต่ Cookies ยังคงมีความสำคัญในกรณีที่ต้องการเข้าถึงข้อมูลจาก Server หรือต้องการรองรับ Browser รุ่นเก่า

สรุป

Cookies เป็นเครื่องมือที่มีประโยชน์ในการจัดเก็บข้อมูลขนาดเล็กใน Browser และสามารถนำไปใช้เพื่อปรับปรุงประสบการณ์ของผู้ใช้ อย่างไรก็ตาม ควรใช้งาน Cookies อย่างระมัดระวังและพิจารณาถึงข้อจำกัดและความเสี่ยงด้านความปลอดภัยที่เกี่ยวข้อง ในบทถัดไปเราจะมาเรียนรู้เกี่ยวกับ Web Workers ซึ่งเป็นวิธีในการรัน JavaScript ใน Background เพื่อเพิ่มประสิทธิภาพให้กับเว็บไซต์ของเรา