‫مدیریت مدرن کوکی‌ها در توسعه وب با Cookie Store API

document.cookie = "username=JohnDoe; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";
console.log(document.cookie); // خروجی: "username=JohnDoe"

if ('cookieStore' in window) {
    console.log("Cookie Store API پشتیبانی می‌شود!");
} else {
    console.log("مرورگر شما از Cookie Store API پشتیبانی نمی‌کند.");
}

1. دسترسی ناهمزمان: این API از وعده‌ها (Promises) استفاده می‌کند که به شما امکان می‌دهد عملیات را بدون مسدود کردن رشته اصلی (Main Thread) انجام دهید. این ویژگی برای برنامه‌های دات‌نت که اغلب با رابط‌های کاربری سنگین کار می‌کنند، بسیار ارزشمند است.
2. مدیریت ساده‌تر کوکی‌ها: به‌جای کار با یک رشته متنی، می‌توانید مستقیماً به کوکی‌ها دسترسی پیدا کنید یا آن‌ها را تغییر دهید.
3. پشتیبانی از رویدادها: این API امکان مشاهده تغییرات کوکی‌ها را از طریق رویدادها فراهم می‌کند، که برای برنامه‌های پویا بسیار کاربردی است.
4. سازگاری با Service Workers: این قابلیت به توسعه‌دهندگان اجازه می‌دهد کوکی‌ها را در محیط‌های بدون DOM مدیریت کنند، که برای برنامه‌های وب پیشرفته حیاتی است.

async function setCookie() {
    await cookieStore.set({
        name: "userId",
        value: "12345",
        expires: Date.now() + 24 * 60 * 60 * 1000, // انقضا پس از 24 ساعت
        path: "/"
    });
    console.log("کوکی با موفقیت تنظیم شد!");
}

setCookie();

async function getCookie() {
    const cookie = await cookieStore.get("userId");
    if (cookie) {
        console.log(`کوکی یافت شد: ${cookie.value}`);
    } else {
        console.log("کوکی یافت نشد.");
    }
}

getCookie();

async function deleteCookie() {
    await cookieStore.delete("userId");
    console.log("کوکی با موفقیت حذف شد!");
}

deleteCookie();

cookieStore.addEventListener('change', (event) => {
    console.log("تغییرات کوکی‌ها:");
    event.changed.forEach(cookie => {
        console.log(`${cookie.name} به ${cookie.value} تغییر کرد`);
    });
    event.deleted.forEach(cookie => {
        console.log(`${cookie.name} حذف شد`);
    });
});

<script>
    async function checkLoginStatus() {
        const token = await cookieStore.get("authToken");
        if (token) {
            document.getElementById("loginStatus").innerText = "کاربر وارد شده است";
        } else {
            document.getElementById("loginStatus").innerText = "کاربر وارد نشده است";
        }
    }

    window.onload = checkLoginStatus;
</script>

<div id="loginStatus"></div>