سبد (0)

کوکی ها در JavaScript

cookieها معمولاً برای تشخیص هویت کاربر، استفاده می شوند.


cookie چیست؟ 

Wiki

cookie متغیری است که در کامپیوتر بازدیدکنند ذخیره می شود و هر زمان که مرورگرِ کامپیوتر مذکور، درخواستی را به سرور ارسال کند، cookie نیز ارسال خواهد شد. با JavaScript هم می توان cookieها را ایجاد و هم بازیابی کرد.

چند مثال از کاربرد cookieها:

  • ذخیره نام در cookie: اولین باری که بازدیدکننده به صفحه وب شما مراجعه می کند، نامش را وارد می کند. نام کاربر در یک cookie ذخیره می شود. در دفعات بعدی مراجعه به صفحه مذکور، یک پیغام خوش آمدگویی شبیه: "آقا/خانم x به وب سایت Beyamooz خوش آمدید." دریافت می کند. (نام کاربر از cookie دریافت می شود)
  • ذخیره تاریخ در cookie: اولین باری که بازدیدکننده به صفحه وب شما مراجعه می کند، تاریخ جاری در یک cookie ذخیره می شود. در دفعات بعدی مراجعه کاربر، تاریخ ذخیره شده در cookie بازیافت می شود و یک پیغام شبیه: "آخرین بازدید شما در تاریخ دوشنبه 21 اردیبهشت 1392 بوده است" نمایش داده می شود.

ایجاد و ذخیره یک cookie

Wiki

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

در اولین باری که بازدیدکننده به صفحه وب شما مراجعه می کند، نام وی سوال می شود. نام بازدیدکننده در یک cookie ذخیره می شود و در دفعات بعدی که به صفحه وبِ مذکور مراجعه می کند، یک پیغام خوش آمدگویی دریافت خواهد کرد.

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

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

پارامترهای ورودی تابع بالا:

  1. c_name: نام cookie
  2. value: مقدار cookie
  3. exdays: تعداد روز مانده تا منقضی شدن cookie

در تابع بالا، ابتدا برای بدست آوردن تاریخ انقضای cookie، پارامتر exdays را با تاریخ جاری جمع می کنیم و در متغیر exdate قرار می دهیم.

سپس نام cookie، مقدار cookie و تاریخ منقضی شدن cookie را در شیء document.cookie ذخیره می کنیم.


برگرداندن مقدار cookie

Wiki

در ادامه برای برگرداندن مقدار cookie، تابع زیر را ایجاد می کنیم:

function getCookie(c_name)
{
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1)
  {
  c_start = c_value.indexOf(c_name + "=");
  }
if (c_start == -1)
  {
  c_value = null;
  }
else
  {
  c_start = c_value.indexOf("=", c_start) + 1;
  var c_end = c_value.indexOf(";", c_start);
    if (c_end == -1)
    {
    c_end = c_value.length;
    }
  c_value = unescape(c_value.substring(c_start,c_end));
  }
return c_value;
}

در کد بالا، با استفاده از متد ()indexOf داخل رشته cookie، نام cookie مورد نظر را جستجو می کنیم. (c_name: نام cookie)

در متد ()indexof اولی، اگر مقدار ("=" + c_name + " ") در رشته cookie یافت نشد، در متد ()indexof داخل if مقدار ("=" + c_name) جستجو می شود (بدون " ") بدین تریب در نهایت مکان شروعِ نام cookie در متغیر c_start ذخیره می شود.

در ادامه، در صورتی که مقدار متغیر c_start مخالف "1-" باشد، محل شروع و پایان مقدار cookie را بدست می آوریم و با استفاده از متد ()substring آنرا برمی گردانیم.


چک کردن مقدار cookie

Wiki

در نهایت، باید تابعی ایجاد نمایید که در صورت تنظیم cookie، یک پیغام خوش آمدگویی نمایش دهد و اگر cookie تنظیم نشده بود پنجره Prompt ظاهر شود و نام کاربر سوال شود و با صدا زدن تابع ()setCookie نام کاربر در cookie ذخیره شود.

function checkCookie()
{
var username=getCookie("username");
  if (username!=null && username!="")
  {
  alert("Welcome again " + username);
  }
else
  {
  username=prompt("Please enter your name:","");
  if (username!=null && username!="")
    {
    setCookie("username",username,365);
    }
  }
}

همه توابع بالا در یک مثال:

مثال (کوکی ها در JavaScript)

<!DOCTYPE html>
<html>
<head>
<script>
function getCookie(c_name)
{
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1)
{
c_start = c_value.indexOf(c_name + "=");
}
if (c_start == -1)
{
c_value = null;
}
else
{
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1)
{
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start,c_end));
}
return c_value;
}

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

function checkCookie()
{
var username=getCookie("username");
if (username!=null && username!="")
  {
  alert("Welcome again " + username);
  }
else
  {
  username=prompt("Please enter your name:","");
  if (username!=null && username!="")
    {
    setCookie("username",username,365);
    }
  }
}
</script>
</head>
<body onload="checkCookie()">
</body>
</html>
خودتان امتحان کنید »

در مثال بالا، زمانی که صفحه بارگذاری می شود، تابع ()checkCookie اجرا می شود.

آموزش صوتی JavaScript

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه