Cookie คืออะไร

cookie คือ string ธรรมดาในรูปแบบ name=value ทุกอย่างหลังเครื่องหมาย = ตัวแรกในแต่ละ attribute คือค่า ทั้งชื่อและค่าเป็น string — ไม่มีตัวเลข บูลีน หรือ object ในระดับ cookie

Set-Cookie: session=abc123
Set-Cookie: theme=dark
Set-Cookie: user_id=42

cookie หลายตัวสำหรับ domain เดียวกันถูกเก็บแยกกัน เมื่อ browser ส่งไป จะรวมอยู่ใน Cookie request header เดียว:

Cookie: session=abc123; theme=dark; user_id=42

สังเกตว่า Cookie request header เป็นแค่รายการคู่ name=value คั่นด้วยเซมิโคลอน — ไม่มี attribute ไม่มี metadata ส่วน attribute เช่น HttpOnly และ Secure อยู่ใน Set-Cookie response header เท่านั้น

ขีดจำกัดขนาด

cookie แต่ละชิ้น (ชื่อ + ค่า + attribute รวมกัน) มีขีดจำกัดที่ประมาณ 4 KB ที่เป็นขีดจำกัดของ browser การตั้งค่า cookie ที่ใหญ่กว่า 4 KB จะล้มเหลวแบบเงียบๆ — browser ไม่ throw error แต่ cookie จะไม่ถูกเก็บ

ดังนั้น cookie จึงไม่เหมาะสำหรับเก็บ JSON payload ภาพที่เข้ารหัส base64 หรือข้อมูลที่มีโครงสร้างขนาดใหญ่ ควรใช้ localStorage หรือ IndexedDB แทน

ขีดจำกัดจำนวนต่อ domain

browser ยังมีขีดจำกัดจำนวน cookie ต่อ domain โดยทั่วไปอยู่ที่ประมาณ 50 cookie ต่อ domain (จำนวนแน่นอนแตกต่างกันตาม browser) เมื่อเกินขีดจำกัด browser อาจลบ cookie เก่าออกอย่างเงียบๆ เพื่อเพิ่มที่ว่างสำหรับ cookie ใหม่

ในทางปฏิบัติ คุณแทบจะไม่เจอขีดจำกัดนี้ในแอปที่ออกแบบดี หากพบว่าต้องการ cookie จำนวนมาก นั่นมักเป็นสัญญาณว่าข้อมูลบางส่วนควรอยู่ใน localStorage หรือ IndexedDB แทน

การส่งอัตโนมัติใน request — ความแตกต่างหลักจาก Web Storage

นี่คือคุณสมบัติที่สำคัญที่สุดของ cookie และเหตุผลที่มีอยู่:

ทุกครั้งที่ browser ทำ HTTP request browser จะแนบ cookie ที่ตรงเงื่อนไขทั้งหมดไปใน Cookie request header โดยอัตโนมัติ

“ตรงเงื่อนไข” หมายความว่า attribute Domain, Path, Secure, และ SameSite ของ cookie อนุญาตให้ส่งไปยัง URL ของ request นั้น

GET /api/user HTTP/1.1
Host: example.com
Cookie: session=abc123; theme=dark

Server ได้รับ cookie โดยไม่ต้องผ่าน JavaScript นี่คือสิ่งที่ทำให้ cookie เป็นตัวเลือกที่ถูกต้องสำหรับ session management — server สามารถตรวจสอบ request ก่อนที่ JavaScript จะทำงาน

Web Storage ไม่เคยสัมผัสเครือข่ายเลย ค่าใน localStorage และ sessionStorage อยู่ใน browser JavaScript ต้องอ่านค่าและรวมไว้ใน fetch หรือ XMLHttpRequest เองอย่างชัดเจน browser จะไม่ส่งค่า Web Storage โดยอัตโนมัติ

เปรียบเทียบพฤติกรรมการส่งข้อมูล

	Cookies	localStorage	sessionStorage
ส่งพร้อม HTTP request	ใช่ — อัตโนมัติ	ไม่	ไม่
Server อ่านได้	ใช่ (ถ้าไม่ถูกตัดออก)	ไม่	ไม่
JavaScript อ่านได้	ใช่ (ถ้าไม่ใช่ HttpOnly)	ใช่	ใช่
ขนาดสูงสุดต่อรายการ	~4 KB	~5 MB รวม	~5 MB รวม
ควบคุมวันหมดอายุ	ใช่ (Expires / Max-Age)	ไม่หมดอายุ	อายุตามแท็บ

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

ตัวเลือก	Benefit	Cost
ส่ง cookie อัตโนมัติทุก request	server ตรวจสอบ session ได้ทันทีโดยไม่ต้องเขียนโค้ดฝั่ง client เพิ่ม	ทุก request ที่ตรง domain ต้องแบก cookie header ไปด้วย แม้ request นั้นไม่ต้องการข้อมูลใน cookie เลย ทำให้ payload หนักขึ้นโดยไม่จำเป็น
จำกัดขนาดไว้ที่ ~4 KB ต่อชิ้น	บังคับให้ cookie เก็บแค่ identifier สั้นๆ ทำให้ request header ไม่บวมเกินไป	เก็บข้อมูลโครงสร้างใหญ่หรือ JSON payload ไม่ได้ ต้องพึ่ง `localStorage`/IndexedDB แทน

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

คิดว่า cookie ทำงานเหมือน localStorage แค่มี syntax ต่างกัน — cookie ถูกส่งอัตโนมัติไปกับทุก HTTP request ที่ตรง domain ส่วน localStorage ไม่เคยออกจาก browser เว้นแต่โค้ดจะส่งเอง
ตั้งค่า cookie ที่มีขนาดเกิน 4 KB แล้วแปลกใจว่าทำไม cookie หาย — browser ไม่ throw error แต่จะไม่เก็บ cookie นั้นเลย ควรตรวจสอบขนาดก่อนตั้งค่าเสมอ
ยัด cookie จำนวนมากเข้าไปเรื่อยๆ จนใกล้ขีดจำกัด ~50 ต่อ domain — เมื่อเกิน browser จะลบ cookie เก่าออกอย่างเงียบๆ ทำให้ session หรือค่า preference บางตัวหายไปโดยไม่มีการแจ้งเตือน

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

Session-based authentication — เว็บแอปส่วนใหญ่ใช้ cookie เก็บ session ID เพราะ server อ่านค่าได้ทันทีจาก Cookie header โดยไม่ต้องรอ JavaScript ทำงานก่อน

Google Analytics — ใช้ cookie (_ga) เก็บ client ID เพื่อติดตามผู้ใช้ข้าม page view ทั้งหมด อาศัยคุณสมบัติที่ cookie ถูกส่งอัตโนมัติซ้ำๆ ทุก request