JavaScript کوکی‌ها

کوکی‌ها به شما امکان می‌دهند که اطلاعات کاربر را در صفحه وب ذخیره کنید.

کوکی چیست؟

کوکی‌ها داده‌هایی هستند که در فایل‌های متنی کوچک روی کامپیوتر شما ذخیره می‌شوند.

وقتی سرور یک صفحه وب را به مرورگر ارسال می‌کند و اتصال بسته می‌شود، سرور تمام اطلاعات کاربر را فراموش می‌کند.

کوکی‌ها برای حل مسئله "چگونه اطلاعات کاربر را به خاطر بسپاریم" اختراع شده‌اند:

  • وقتی کاربر به یک صفحه وب دسترسی پیدا می‌کند، نام او می‌تواند در کوکی ذخیره شود.
  • وقتی کاربر دوباره به این صفحه باز می‌گردد، کوکی‌ها نام او را "یاد می‌کنند".

کوکی‌ها در جفت‌های نام-مقدار ذخیره می‌شوند، مانند:

username = Bill Gates

وقتی مرورگر یک صفحه وب را از سرور درخواست می‌کند، کوکی‌های مربوط به آن صفحه به درخواست اضافه می‌شوند. به این ترتیب سرور داده‌های مورد نیاز برای "یادآوری" اطلاعات کاربر را دریافت می‌کند.

اگر پشتیبانی از کوکی‌های محلی در مرورگر غیرفعال باشد، تمام مثال‌های زیر کار نمی‌کنند.

با استفاده از JavaScript کوکی‌ها ایجاد شود

JavaScript می‌تواند از document.cookie مشخصات ایجاد، خواندن و حذف کوکی‌ها.

با استفاده از JavaScript، می‌توانید کوکی‌ها را به این صورت ایجاد کنید:

document.cookie = "username=Bill Gates";

شما همچنین می‌توانید تاریخ‌های معتبر را اضافه کنید (زمان UTC). به صورت پیش‌فرض، کوکی‌ها در صورت بسته شدن مرورگر حذف می‌شوند:

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC";

با استفاده از path پارامتر، شما می‌توانید به مرورگر بگویید کوکی به چه مسیری تعلق دارد. به صورت پیش‌فرض، کوکی به صفحه فعلی تعلق دارد.

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

با استفاده از JavaScript کوکی را بخوانید

با استفاده از JavaScript می‌توانید به این صورت کوکی را بخوانید:

var x = document.cookie;

document.cookie همه کوکی‌ها در یک رشته برمی‌گردانند، مانند: cookie1=value; cookie2=value; cookie3=value;

با استفاده از JavaScript کوکی را تغییر دهید

با استفاده از JavaScript می‌توانید مانند ایجاد کوکی آن را تغییر دهید:

document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

کوکی قدیمی جایگزین می‌شود.

با استفاده از JavaScript کوکی را حذف کنید

حذف کوکی بسیار ساده است.

در حذف کوکی نیازی به指定 مقدار کوکی نیست:

فقط expires تنها تنظیم پارامتر به تاریخ گذشته کافی است:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

باید مسیر کوکی را تعریف کنید تا کوکی درست حذف شود.

اگر مسیر مشخص نکنید، برخی مرورگرها به شما اجازه نمی‌دهند کوکی را حذف کنید.

رشته کوکی

document.cookie به نظر می‌رسد که یک رشته متنی معمولی است. اما اینطور نیست.

حتی اگر به document.cookie یک رشته کامل کوکی بنویسید، وقتی دوباره آن را بخوانید، فقط نام-مقدار آن را خواهید دید.

اگر کوکی جدید تنظیم شود، کوکی قدیمی جایگزین نمی‌شود. کوکی جدید به document.cookie اضافه می‌شود، بنابراین اگر document.cookie را بخوانید، چیزی مانند این خواهید دید:

cookie1 = value; cookie2 = value;
　 　 　

اگر بخواهید ارزش کوکی خاصی را پیدا کنید، باید توابع JavaScriptی بنویسید که در رشته کوکی جستجو می‌کنند.

مثال JavaScript کوکی

در مثال زیر، ما یک کوکی ایجاد می‌کنیم که نام بازدیدکننده را ذخیره کند.

وقتی بازدیدکننده اولین بار به صفحه وب می‌رسد، از او خواسته می‌شود که نام خود را وارد کند. سپس این نام در کوکی ذخیره می‌شود.

وقتی بازدیدکننده دوباره به صفحه مشابه باز می‌گردد، او یک پیام خوش‌آمدگویی دریافت خواهد کرد.

مثلاً، ما 3 تابع JavaScript ایجاد خواهیم کرد:

  1. توابع تنظیم ارزش کوکی
  2. توابع دریافت ارزش کوکی
  3. توابع بررسی ارزش کوکی

توابع تنظیم کوکی

ابتدا یک تابع ایجاد می‌کنیم که نام بازدیدکننده را در متغیر کوکی ذخیره کند:

مثال

تک‌ وظیفه (function setCookie(cname, cvalue, exdays) {
    برای (var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    expires = "expires="+ d.toUTCString();
    برای (document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

توضیح مثال:

پارامترهای این تابع عبارتند از: نام کوکی (cname)، ارزش کوکی (cvalue) و تعداد روزهای انقضای کوکی (exdays).

این تابع با اضافه کردن نام کوکی، ارزش کوکی و رشته انقضای کوکی تنظیم می‌شود.

توابع دریافت کوکی

پس از آن، ما یک تابع ایجاد می‌کنیم که ارزش کوکی مورد نظر را بازمی‌گرداند:

مثال

تک‌ وظیفه (function getCookie(cname) {
    برای (var name = cname + "=";
    decodedCookie = decodeURIComponent(document.cookie);
    ca = decodedCookie.split(';');
    برای (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
         }
         اگر (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
         }
     }
    return "";
}

توضیح عملکرد تابع:

کوکی را به عنوان پارامتر (cname) استفاده کنید.

متغیرها (name) و متن مورد جستجو (CNAME”=”) ایجاد کنید.

مکانیزم تبدیل رشته کوکی، پردازش کوکی‌هایی که شامل کاراکترهای خاص هستند، مانند “$”.

با استفاده از نقاط ویرگول document.cookie را به آرایه‌ای به نام ca (decodedCookie.split(';')) تقسیم می‌کنیم.

تک‌ وظیفه بر روی آرایه ca (i = 0; i < ca.length; i++)، سپس هر یک از مقادیر را خواند (c = ca[i]).

اگر کوکی پیدا شد (c.indexOf(name) == 0)، مقدار آن را بازمی‌گرداند (c.substring(name.length, c.length)).

اگر کوکی پیدا نشد، خالی

وظیفه بررسی کوکی

در نهایت، ما یک وظیفه برای بررسی تنظیم کوکی ایجاد می‌کنیم.

اگر کوکی تنظیم شده باشد، یک سلام نشان داده می‌شود.

اگر کوکی تنظیم نشده باشد، یک نوار هشدار نمایش داده می‌شود که از کاربر می‌خواهد نام خود را وارد کند و نام کاربری کوکی را به مدت 365 روز ذخیره کند، از طریق فراخوانی setCookie وظیفه:

مثال

function checkCookie() {
    برای (var username = getCookie("username");
    اگر (username != "") {
        alert("به شما خوش آمدید دوباره " + username);
    }
        username = prompt("لطفاً نام خود را وارد کنید:", "");
        اگر (username != "" && username != null) {
            setCookie("username", username, 365);
        }
    }
}

حالا آنها را ترکیب می‌کنیم

مثال

تک‌ وظیفه (function setCookie(cname, cvalue, exdays) {
    برای (var d = new Date();
    برای (d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    برای (var expires = "expires="+d.toUTCString();
    برای (document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
تک‌ وظیفه (function getCookie(cname) {
    برای (var name = cname + "=";
    برای (var ca = document.cookie.split(';');
    برای (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
         }
        if (c.indexOf(name)  == 0) {
            return c.substring(name.length, c.length);
         }
    }
    return "";
}
function checkCookie() {
    var user = getCookie("username");
    if (user != "") {
        alert("خوش آمدید دوباره " + user);
    }
        user = prompt("لطفاً نام خود را وارد کنید:", "");
        if (user != "" && user != null) {
            setCookie("username", user, 365);
        }
    }
}

به طور شخصی امتحان کنید

مثال بالا در اجرای صفحه، عملکرد checkCookie() را اجرا می‌کند.