การอ่านและเขียน cookie

ข้อแปลกของ document.cookie

document.cookie ไม่ทำงานเหมือน property JavaScript ทั่วไป มีพฤติกรรมที่แตกต่างกันโดยสิ้นเชิงขึ้นอยู่กับว่าคุณกำลังอ่านหรือเขียน

การอ่าน จะคืน cookie ทั้งหมดสำหรับหน้าปัจจุบันเป็น string เดียวคั่นด้วยเซมิโคลอน:

// ถ้าตั้งค่าคุกกี้สามชิ้น:
console.log(document.cookie);
// "theme=dark; user=Alice; lang=en"

การเขียน จะตั้งค่า (หรืออัปเดต) cookie เพียงหนึ่งชิ้น — ไม่ได้แทนที่ cookie ทั้งหมด:

document.cookie = 'theme=light; Max-Age=86400; SameSite=Lax';
// อัปเดตเฉพาะ theme — คุกกี้อื่นไม่เปลี่ยนแปลง

ความไม่สมมาตรนี้คือส่วนที่น่าประหลาดใจที่สุดของ cookies API การเขียนไปยัง document.cookie เหมือนกับการเรียกฟังก์ชัน setCookie() มากกว่าการกำหนดค่าให้ property string

ไวยากรณ์สำหรับตั้งค่า cookie คือ string ที่เริ่มด้วย name=value ตามด้วย attribute ที่เป็นตัวเลือก คั่นด้วยเซมิโคลอน:

// Session cookie (ไม่มี Expires/Max-Age — ลบเมื่อเบราว์เซอร์ปิด)
document.cookie = 'demo_pref=dark; SameSite=Lax';

// Persistent cookie (รอดหลังเบราว์เซอร์ restart)
document.cookie = 'demo_pref=dark; Max-Age=86400; SameSite=Lax';

// Cookie ที่จำกัด path
document.cookie = 'demo_pref=dark; Max-Age=86400; Path=/app; SameSite=Lax';

ควรใส่ SameSite=Lax เป็นอย่างน้อยสำหรับ cookie ที่ตั้งฝั่ง client เสมอ browser สมัยใหม่ default เป็น Lax สำหรับ cookie ที่ไม่มี SameSite แต่การระบุชัดเจนปลอดภัยกว่า

เนื่องจากการอ่าน document.cookie คืน cookie ทั้งหมดเป็น string เดียว คุณต้อง parse เองเพื่อหา cookie ที่ต้องการตามชื่อ:

function getCookie(name) {
  var pairs = document.cookie.split('; ');
  for (var i = 0; i < pairs.length; i++) {
    var pair = pairs[i].split('=');
    if (pair[0] === name) return decodeURIComponent(pair[1]);
  }
  return null;
}

var theme = getCookie('demo_pref'); // 'dark' หรือ null

สังเกต decodeURIComponent — ค่าที่ตั้งด้วย encodeURIComponent ต้องถูก decode ตอนอ่านด้วย

ไม่สามารถลบ cookie ได้ด้วยการกำหนด string ว่าง การลบ cookie ทำได้โดยการตั้งค่าใหม่พร้อม Max-Age=0 (หรือ Expires ที่ผ่านมาแล้ว):

function deleteCookie(name) {
  document.cookie = name + '=; Max-Age=0; SameSite=Lax';
}

deleteCookie('demo_pref');

รูปแบบ helper ที่ครบชุด

นี่คือรูปแบบ get/set/delete ที่ใช้ในโค้ด production:

function setCookie(name, value, maxAge) {
  document.cookie = name + '=' + encodeURIComponent(value) +
    '; Max-Age=' + maxAge + '; SameSite=Lax';
}

function getCookie(name) {
  var pairs = document.cookie.split('; ');
  for (var i = 0; i < pairs.length; i++) {
    var pair = pairs[i].split('=');
    if (pair[0] === name) return decodeURIComponent(pair[1]);
  }
  return null;
}

function deleteCookie(name) {
  document.cookie = name + '=; Max-Age=0; SameSite=Lax';
}

Demo ที่รันได้: ตั้งค่า อ่าน ลบ

Browser Storage

// Helper functions
function setCookie(name, value, maxAge) {
  document.cookie = name + '=' + encodeURIComponent(value) + '; Max-Age=' + maxAge + '; SameSite=Lax';
}
function getCookie(name) {
  var pairs = document.cookie.split('; ');
  for (var i = 0; i < pairs.length; i++) {
    var pair = pairs[i].split('=');
    if (pair[0] === name) return decodeURIComponent(pair[1]);
  }
  return null;
}
function deleteCookie(name) {
  document.cookie = name + '=; Max-Age=0; SameSite=Lax';
}

// Demo: set -> read -> delete
setCookie('demo_user', 'Alice', 60);
console.log('Set demo_user=Alice');
console.log('Read:', getCookie('demo_user'));

deleteCookie('demo_user');
console.log('After delete:', getCookie('demo_user'));

ข้อแลกเปลี่ยน

ตัวเลือก	Benefit	Cost
เขียน cookie ทีละชิ้นผ่าน `document.cookie`	อัปเดตค่าเดียวได้โดยไม่กระทบ cookie อื่น ไม่ต้องจัดการ state ทั้งก้อน	ต้อง parse string เองทุกครั้งที่ต้องการอ่านค่าตามชื่อ ไม่มี API แบบ key-value ให้ใช้ตรงๆ
ใช้ `encodeURIComponent`/`decodeURIComponent` ห่อค่า	ป้องกันค่าที่มีเซมิโคลอนหรืออักขระพิเศษทำให้ parsing พัง	เพิ่มขั้นตอนที่ต้องจำทุกครั้ง ลืมด้านใดด้านหนึ่งแล้วค่าจะอ่านผิดแบบเงียบๆ

ข้อผิดพลาดที่พบบ่อย

ลบ cookie ด้วยการกำหนด string ว่าง (document.cookie = 'name=';) — วิธีนี้ไม่ลบ cookie จริง ต้องตั้งค่าใหม่พร้อม Max-Age=0 (หรือ Expires ที่ผ่านมาแล้ว) เท่านั้นถึงจะลบได้
ลืม encodeURIComponent ตอนตั้งค่าหรือ decodeURIComponent ตอนอ่าน — ค่าที่มีเซมิโคลอนหรืออักขระพิเศษจะทำให้ parsing แบบแยกด้วย ; พังหรือได้ค่าที่ผิดเพี้ยน
เข้าใจผิดว่า document.cookie = 'a=1' จะล้าง cookie เดิมทั้งหมดแล้วตั้งใหม่ — การเขียนอัปเดตแค่ cookie ชื่อ a เท่านั้น cookie อื่นที่มีอยู่ก่อนไม่หายไปไหน

💡 ตัวอย่างจากของจริง

ระบบ theme/preference ฝั่ง client — เว็บไซต์จำนวนมากใช้ helper แบบ setCookie/getCookie เก็บค่าอย่าง theme=dark เพื่อให้ preference คงอยู่ข้าม session โดยไม่ต้อง login

Cookie consent banner — เว็บไซต์ที่ต้องขอความยินยอมผู้ใช้มักเขียน cookie เช่น consent=accepted ผ่าน document.cookie โดยตรงหลังผู้ใช้กดปุ่มยอมรับ เพื่อไม่ต้องแสดง banner ซ้ำในครั้งถัดไป

การอ่านและเขียน cookie

ข้อแปลกของ document.cookie

การตั้งค่า cookie

การอ่าน cookie ตามชื่อ

การลบ cookie

รูปแบบ helper ที่ครบชุด

Demo ที่รันได้: ตั้งค่า อ่าน ลบ

ข้อแลกเปลี่ยน

ข้อผิดพลาดที่พบบ่อย