کوکی‌ها
کوکی یک تکه متن کوچک است که مرورگر برای همین سایت نگه می‌دارد و گاهی با درخواست بعدی می‌فرستد. این صفحه ترجیح theme=dark را می‌نویسد، دوباره می‌خواند و theme / dark را نشان می‌دهد. کوکی جای رمز یا access token نیست.
با ذخیرهٔ وب یکی نیست
صفحهٔ قبل saved / lida / tea را در localStorage نگه داشت. کوکی فرق دارد: مرورگر می‌تواند آن را همراه درخواست‌های بعدی همان سایت و مسیر مناسب بفرستد. document.cookie یک رشته با چند جفت جداشده با نقطه‌ویرگول است، نه یک شیء. اگر نامی نباشد، مقداری هم نیست؛ خطا پرتاب نمی‌شود.
یک ترجیح کوچک بنویس
در theme=dark، اولی نام است و دومی مقدار. Path=/ می‌گوید این ترجیح در مسیرهای همین سایت دیده شود. SameSite=Lax فرستادن میان‌سایتی را در حالت‌های رایج محدود می‌کند. Secure یعنی مرورگر آن را فقط با HTTPS می‌فرستد. نوشتن document.cookie = "theme=dark; Path=/; SameSite=Lax; Secure" این جفت را میان کوکی‌های دیگری که صفحه حق خواندنشان را دارد می‌گذارد؛ پس کل رشته را با یک مقدار مقایسه نکن.
یک نام را از رشته بیرون بکش
رشته را از ; جدا کن و دنبال نامی بگرد که با = ادامه دارد. مرورگر خودش این رشته را به شیء تبدیل نمی‌کند. بخش بعد از مساوی را decode کن.
function readCookie(name) {
const start = name + "=";
const pair = document.cookie
.split("; ")
.find((part) => part.startsWith(start));
return pair ? decodeURIComponent(pair.slice(start.length)) : null;
}
console.log(readCookie("theme"));
console.log(readCookie("drink"));
لاگ‌ها dark و بعد null هستند. drink هیچ‌وقت نوشته نشده. readCookie برای نام گم‌شده null می‌دهد؛ همان رفتاری که getItem برای کلید گم‌شده داشت.
مقدار دارای فاصله را encode کن
جداکننده‌هایی مثل ; و = بخشی از دستور کوکی‌اند. encodeURIComponent پیش از نوشتن، مقدار را به متن امن تبدیل می‌کند. decodeURIComponent موقع خواندن آن را برمی‌گرداند.
const label = "tea / regular";
document.cookie =
"last-order=" + encodeURIComponent(label) + "; Path=/; SameSite=Lax; Secure";
console.log(readCookie("last-order"));
لاگ tea / regular است. ; خام داخل مقدار نگذار؛ مرورگر آن را شروع ویژگی تازهٔ کوکی می‌داند. encode مرز را روشن نگه می‌دارد.
کوکی یا localStorage؟
بسته به اینکه چه کسی به مقدار نیاز دارد جعبه را انتخاب کن. هیچ‌کدام راز را از JavaScriptی که همین صفحه اجرا می‌کند پنهان نمی‌کنند.
📊 کوکی و ذخیرهٔ وب
| نیاز | کوکی | localStorage |
|---|---|---|
| فرستادن با درخواست هم‌مبدأ | اغلب بله | نه |
| خواندن از JavaScript صفحه | مگر HttpOnly باشد | بله |
| ترجیح کوچک مثل تم | ممکن است | معمولاً ساده‌تر است |
| شناسهٔ نشست حساس | سرور با HttpOnly و Secure می‌گذارد | اینجا نگذار |
HttpOnly برای کوکی نشست مهم است، اما JavaScript نه می‌تواند آن را بسازد و نه بخواند. سرور آن را در پاسخ Set-Cookie می‌فرستد. این درس ترجیح بی‌خطر تم را نشان می‌دهد، نه ورود کاربر.
خط صفحه
صفحه dark را می‌نویسد، فقط کوکی theme را می‌خواند، و نام را کنار مقدار می‌گذارد.
<!DOCTYPE html>
<html>
<body>
<p id="line">…</p>
<script>
document.cookie = "theme=dark; Path=/; SameSite=Lax; Secure";
function readCookie(name) {
const start = name + "=";
const pair = document.cookie.split("; ")
.find((part) => part.startsWith(start));
return pair ? decodeURIComponent(pair.slice(start.length)) : null;
}
document.querySelector("#line").textContent =
"theme / " + readCookie("theme");
</script>
</body>
</html>
خط theme / dark است. روی HTTP ساده، مرورگر ممکن است کوکی Secure را نپذیرد؛ سایت زنده HTTPS دارد. saved / lida / tea خط صفحهٔ ذخیره‌سازی بود.
پشت پیشخوان
- theme=dark را با Path=/ بنویس و theme را بخوان. مقدار dark است.
- پیش از نوشتن drink آن را بخوان. مقدار null است.
- tea / regular را با encodeURIComponent بنویس و بدون تغییر بخوان.
- برای شناسهٔ نشست، پرچم‌های امنِ سمت سرور را نام ببر: HttpOnly و Secure و SameSite مناسب.
- صفحه را بخوان. خط theme / dark است.
جاهایی که اشتباه می‌شود
document.cookie صندوق راز نیست و شیء JavaScript هم نیست.
- گذاشتن رمز یا token در کوکی‌ای که JavaScript می‌خواند
- مقایسهٔ کل رشتهٔ کوکی با theme=dark
- جا انداختن Path=/ و تعجب از ندیدن ترجیح در مسیر دیگر
- گذاشتن جداکنندهٔ خام در مقدار به‌جای encode کردن
- فکر کردن که JavaScript می‌تواند HttpOnly بسازد
- خواندن خط به‌شکل saved / lida / tea
این‌ها را نگه دار
- کوکی متن name=value است و document.cookie چند جفت دارد
- readCookie برای theme مقدار dark و برای نام گم‌شده null می‌دهد
- مقدار را پیش از نوشتن encode و بعد از خواندن decode کن
- شناسهٔ نشست را سرور با HttpOnly، Secure و SameSite می‌گذارد
- خط صفحه theme / dark است
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود