کار با کوکیها در جاوااسکریپت
کوکیها یکی از قدیمیترین و در عین حال هنوز پرکاربردترین روشهای ذخیرهی داده در مرورگر هستند؛ روشی که پیش از معرفی localStorage و sessionStorage نیز وجود داشته است. تفاوت اصلی کوکیها با آن دو ابزار در این است که کوکیها بهطور خودکار همراه هر درخواست HTTP به سرور ارسال میشوند، به همین دلیل هنوز هم در مواردی مثل مدیریت نشست کاربر (session) و احراز هویت نقش مهمی دارند.
دسترسی به کوکیها با document.cookie
تمام کوکیهای مربوط به صفحهی فعلی از طریق ویژگی document.cookie در دسترس هستند؛ اما ساختار این ویژگی با آنچه در localStorage دیدیم، متفاوت است. تمام کوکیها بهصورت یک رشتهی واحد و جداشده با نقطهویرگول برگردانده میشوند:
console.log(document.cookie);
// "theme=dark; lang=fa; userId=1024"تعریف یک کوکی جدید
برای تعریف کوکی، مقداری به شکل key=value به document.cookie نسبت داده میشود. نکتهی مهم این است که این نسبتدهی، کوکیهای قبلی را پاک نمیکند، بلکه فقط کوکی جدید را به مجموعه اضافه میکند:
تعیین تاریخ انقضا و مسیر
بدون تعیین تاریخ انقضا، کوکی بهصورت پیشفرض یک کوکی نشستی (session cookie) است و با بستن مرورگر پاک میشود. برای ماندگاری طولانیتر، باید ویژگی expires یا max-age مشخص شود:
// انقضا با تاریخ مشخص
document.cookie = "theme=dark; expires=Fri, 31 Dec 2027 23:59:59 GMT";
// انقضا با تعداد ثانیه از اکنون (روش سادهتر)
document.cookie = "theme=dark; max-age=" + 60 * 60 * 24 * 30; // ۳۰ روز
// محدود کردن کوکی به یک مسیر مشخص از سایت
document.cookie = "theme=dark; path=/dashboard";خواندن مقدار یک کوکی مشخص
از آنجا که document.cookie تمام کوکیها را در یک رشته برمیگرداند، برای استخراج مقدار یک کوکی خاص باید این رشته را پردازش کرد:
function getCookie(name) {
const cookies = document.cookie.split("; ");
const found = cookies.find((row) => row.startsWith(name + "="));
return found ? found.split("=")[1] : null;
}
console.log(getCookie("theme")); // "dark"حذف یک کوکی
جاوااسکریپت متدی برای حذف مستقیم کوکی ندارد؛ روش رایج، تعریف دوبارهی همان کوکی با تاریخ انقضای گذشته است تا مرورگر آن را حذف کند:
document.cookie = "theme=; expires=Thu, 01 Jan 1970 00:00:00 GMT";جدول مقایسهی کوکی با localStorage
| ویژگی | Cookie | localStorage |
|---|---|---|
| ارسال خودکار به سرور | بله، با هر درخواست HTTP | خیر |
| حجم قابل ذخیره | حدود ۴ کیلوبایت | حدود ۵ تا ۱۰ مگابایت |
| تعیین تاریخ انقضا | پشتیبانی مستقیم دارد | باید بهصورت دستی پیادهسازی شود |
| کاربرد رایج | نشست کاربر، احراز هویت | تنظیمات، دادههای حجیمتر سمت کلاینت |
نکات کلیدی
- document.cookie تمام کوکیهای صفحه را در یک رشتهی جداشده با نقطهویرگول برمیگرداند.
- بدون تعیین expires یا max-age، کوکی با بستن مرورگر پاک میشود.
- حذف کوکی از طریق بازتعریف آن با تاریخ انقضای گذشته انجام میشود، نه یک متد مستقیم.
- کوکیها برخلاف localStorage، بهطور خودکار با هر درخواست به سرور ارسال میشوند و حجم ذخیرهسازی بسیار کمتری دارند.
جمعبندی
کوکیها با وجود قدیمیبودن، همچنان به دلیل ارسال خودکار به سرور، نقش مهمی در مدیریت نشست و احراز هویت کاربران دارند. کار با آنها از طریق ویژگی document.cookie انجام میشود که ساختاری متفاوت از localStorage دارد و برای تعیین انقضا، مسیر و حذف کوکی، نیاز به نوشتن رشتههای دستی است. شناخت تفاوت این ابزار با روشهای نوینتر ذخیرهسازی، به انتخاب درست ابزار مناسب برای هر نیاز کمک میکند.