Cookies

cookie คือ string ขนาดเล็ก — แต่ละชิ้นมีขนาดไม่เกินประมาณ 4 KB — ที่ browser จัดเก็บแยกตาม domain และส่งไปพร้อมกับ HTTP request ทุกครั้งโดยอัตโนมัติ นี่คือสิ่งที่ทำให้ cookie แตกต่างจากกลไกจัดเก็บข้อมูลอื่นๆ ใน browser ทั้งหมด

เมื่อ server ส่ง Set-Cookie response header มา browser จะเก็บ cookie นั้นและส่งกลับไปใน request ถัดๆ ไปที่ตรงกับ domain นั้น (ขึ้นอยู่กับ attribute ของ cookie เช่น Path, Domain, Secure, และ SameSite)

เมื่อ JavaScript เรียก document.cookie = 'name=value' จะตั้งค่า cookie ฝั่ง client — แต่ browser จะยังคงส่ง cookie นั้นไปยัง server ใน request ถัดไปอีกด้วย

มีสองวิธีที่ cookie จะถูกเก็บไว้ใน cookie jar ของ browser:

ตั้งโดย server (ผ่าน Set-Cookie header):

HTTP/1.1 200 OK
Set-Cookie: session=abc123; HttpOnly; Secure; SameSite=Strict

Server เป็นผู้ควบคุมค่าและ attribute ของ cookie cookie ที่มี HttpOnly จะมองไม่เห็นจาก JavaScript เลย — document.cookie จะไม่แสดงค่าออกมาไม่ว่ากรณีใด

ตั้งโดย client (ผ่าน document.cookie):

document.cookie = 'theme=dark; Max-Age=86400; SameSite=Lax';

JavaScript สามารถตั้งค่า อ่าน และลบ cookie ที่ไม่ได้ทำเครื่องหมาย HttpOnly ได้

flowchart LR
  Browser -->|HTTP Request + Cookie header| Server
  Server -->|HTTP Response + Set-Cookie header| Browser
  Browser -->|stores| CookieJar[(Cookie Jar)]
  CookieJar -->|sent on every matching request| Server

cookie ถูกเก็บใน cookie jar ของ browser และถูกส่งโดยอัตโนมัติใน HTTP request ทุกครั้งที่ตรงเงื่อนไข

คำถามสำคัญที่สุดคือ: server จำเป็นต้องรับค่านี้หรือเปล่า?

กรณีการใช้งาน	ตัวเลือกที่ดีที่สุด	เหตุผล
Auth token / session ID	Cookie (HttpOnly + Secure)	Server ต้องใช้ค่านี้; HttpOnly ป้องกันการขโมยผ่าน XSS
CSRF token	Cookie	Server ตั้งค่า; JS อ่านเพื่อใส่ใน request body
ค่าความชอบของผู้ใช้ (ธีม, ภาษา)	Web Storage	ใช้ฝั่ง client เท่านั้น; ไม่จำเป็นต้องส่งไป server ทุก request
ตะกร้าสินค้า (client-only)	Web Storage หรือ IndexedDB	ข้อมูลมากกว่า รูปแบบสมบูรณ์กว่า; ไม่มีภาระทางเครือข่าย
Feature flags จาก server	Cookie	Server ปรับ response ได้ก่อน JS โหลด

กฎพื้นฐาน: ใช้ cookie สำหรับทุกสิ่งที่ server ต้องรับ; ใช้ Web Storage สำหรับ UI state ที่เป็น client-only

เนื้อหาในโมดูลนี้

บทเรียน	สิ่งที่คุณจะเรียนรู้
หน้านี้	cookie คืออะไร, การทำงานของ cookie, และ cookie vs Web Storage
`what-are-cookies`	รูปแบบ name=value, ขีดจำกัดขนาด, ขีดจำกัดจำนวน, การส่งอัตโนมัติใน request
`reading-writing`	ข้อแปลกของ `document.cookie`, helper get/set/delete, demo ที่รันได้
`attributes-and-samesite`	Expires, Max-Age, Path, Domain, Secure, HttpOnly, SameSite
`cookie-store-api`	API แบบ async ของ `cookieStore` และ fallback ตรวจสอบความรองรับ

Cookies

cookie คืออะไร?

cookie ที่ตั้งฝั่ง client vs ฝั่ง server

การทำงานของ cookie

cookie vs Web Storage: เลือกใช้เมื่อไหร่

เนื้อหาในโมดูลนี้