حتما تا حدودی با کوکی ها آشنا هستید و در سایت های مختلف نمونه هایی را مشاهده کرده اید. مثلا سایت هایی که به هنگام ورود اول به سایت، نام شمارا گرفته و پس از آن،با هر بار ورود به آن سایت، شما را شناخته و به شما خوش آمد می گویند. یا مثلا عددی رو با عنوان تعداد بازدید شما نمایش می دهند ویا تاریخ آخرین بازدید و چیزهایی مثل این. امروز یادمی گیرید که چگونه به کوکی ها مقدار دهید و یا مقادیر آنها را بازیابی کنید.
مزایای کوکی ها : کوکی ها می توانند اطلاعات را در مدت زمان معینی و یعنی در تماس های مختلف، نگهداری کنند. پس یکی از مزیت های کوکی پایداری آن است، به این صورت که مقادیر کوکی می توانند چند روز، ماه و یا چند سال باقی بمانند.
وقتی شما یک URL را ازسرویس دهنده وب درخواست می کنید،ابتدا بررسی می کند که آیا کوکی ای مرتبط با آن URL وجود دارد یا نه. اگر وجود داشته باشد، مرورگر اطلاعات مربوط به آن کوکی را همراه با URL به سرویس دهنده می فرستد. و سرویس دهنده کوکی ها را نوسازی می کند.
مطالبی که در این جلسه می خوانیم:
رویدادها در جاوا اسکریپت
مقدار دادن به کوکی ها
بازیابی مقادیر کوکی
حذف کوکی
بخش اول : رویدادها در جاوا اسکریپت
قبل از کوکی ها می خوام کمی در مورد رویدادها صحبت کنم. تا به اینجا مابا رویدادها در HTML کار کردیم مثلا رویداد onClick یک دکمه رو در خود تگ ایجاد دکمه قرار می دادیم و امروز یاد می گیریم که از این رویداد چطور در تگ script استفاده کنیم.
برای مثال همین رویداد onClick رو یک بار در کدنویسی HTML و بار دیگه در کدنویسی JavaScript استفاده می کنیم:
| ۱ < form name=”form1″ > ۲ < input type=”button” name=”butt1″ onClick=”fun1()” / > ۳ < /form > |
در اینجا یک دکمه ایجاد کردیم و در رویداد کلیک دکمه تابع fun1 را صدا زدیم(فرض می کنیم این تابع قبلا ساخته شده). توجه کنید که در روش زیر از نام فرم و دکمه استفاده می شود.
| ۱ < script > document.form1.butt1.onClick=”fun1()” < /script > |
در اینجا ازخصوصیات شیء document استفاده کردیم، این خط کد به جاوا اسکریپت می فهماند که در رویداد کلیک دکمه ای بانام butt1 که درفرم ۱ در سند جاری قرار دارد، تابع fun1 فراخوانی شده. حتی با جاوا اسکریپت می توانید رویدادها را فعال کنید، یعنی مثلا کدی بنویسید که با کلیک کردن بر روی دکمه۱، رویداد onClickدکمه دیگری فعال شود،بطوری که گویی شما روی دکمه دوم کلیک کرده اید.
به تکه کد زیر توجه کنید:
| ۰۱ < head > ۰۲ < script > ۰۳ function fun1() ۰۴ { document.form1.butt2.click() } ۰۵ ۰۶ function fun2() ۰۷ { alert(“button2.clicked”) } ۰۸ ۰۹ < /script > ۱۰ < /head > ۱۱ ۱۲ < body > ۱۳ < form name=”form1″ > ۱۴ < input type=”button” name=”butt1″ value=”button1″ onClick=”fun1()” / > ۱۵ < input type=”button” name=”butt2″ value=”button2″ onClick=”fun2()”/ > ۱۶ < /form > ۱۷ < /body > |
توضیحات:
در این تکه کد دو تابع داریم که تابع۱ در رویداد onClick دکمه۱ و تابع ۲ در رویداد کلیک دکمه دوم فراخوانی شده، یعنی با کلیک بر روی Button1، تابع اول فراخوانی می شود که در آن تابع با کد نوشته شده دکمه دوم به صورت خودکار کلیک می شود. پس در این زمان رویداد کلیک Button2 فعال می شود که در آن تابع دوم(fun2) صدا زده شده است و در این تابع پیامی ظاهر شده و اعلام می کند که دکمه دوم کلیک شده است.
می توانید نتیجه را از این قسمت ببینید.توجه کنید که با کلیک بر روی هر یک از دکمه ها، همان کادر پیام ظاهر می شود،چون با کلیک برروی button2 تابع fun2 صدازده می شود و با کلیک بر روی button1 دکمه button2 به صورت خودکار کلیک شده و در نتیجه اتفاق قبلی تکرار می شود.
بخش دوم: مقدار دادن به کوکی ها
حالا که به طور کامل با رویدادها و نحوه استفاده از آنها در جاوا اسکریپت هم آشنا شدید، به سراغ کوکی ها می ریم.
پارامترهایی برای تعیین کوکی وجود دارند که عبارتند از:
۱ name = value
۲ expires = date
۳ path = path
۴ domain = domain name
۵ secure
با استفاده از پارامتر خط اول، نام کوکی و مقدار آن را مشخص می کنیم. با پارامترExpires در واقع تاریخ انقضای کوکی را مشخص می کنیم، یعنی تعیین می کنیم که این کوکی تا چه زمانی داده ها را در خود نگهداری کند.
| ۱ var year = 365*24*60; ۲ var expDate = new Date(); ۳ expDate.setTime = (expDate.getTime()+year); ۴ document.cookie = “expires=”+expDate.toGMTString(); |
در این کد، طول عمر یک کوکی، یک سال در نظر گرفته شده است. در خط اول در متغیر year مدت زمان را تعیین کردیم. در خط دوم متغیری با نام expDate ایجاد کردیم که تاریخ و زمان فعلی سیستم رو ذخیره می کند.
خط سوم: اگر یادتون باشه در جلسه پنجم با شیء Date و متدهای آن آشنا شدید، setTime هم یکی دیگر از متدهای شیء Date است که با این متد می توانیم بصورت دستی یک زمان را برای این شیء تعیین کنیم. در این خط ما با کمک این متد مدت یک سال را در متغیر expDate ذخیره کردیم، به صورت که در داخل پرانتز ابتدا با متد getDate تاریخی را که در متغیر expDate بود را بدست آوردیم(زمان فعلی) و بعد مقدار متغیر year را به آن اضافه کردیم.
در خط آخر با استفاده از متد toGMTString که یکی از متدهای شیء Date است، و تاریخ را به وقت گرینویچ تعیین می کند، تاریخ موجود در متغیر expDate را به این فرمت تبدیل کرده و آن را در پارامتر expires کوکی ریختیم.
پارامتر بعدی مسیر ذخیره کوکی را مشخص می کند.
در حالت عادی کوکی ها در محلی ذخیره می شوند که صفحات وب در آنجا ایجاد شده اند. با استفاده از پارامتر path می توان کوکی ها را در محل دلخواه ذخیره کرد. تکه کد زیر کوکی mycookie را برای هر صفحه ای که در فولدر javascript قرار دارد، آماده می کند.
| ۱ document.cookie=”mycookie=value; path=/javascript” ; |
نکته:
طریقه مقدار دادن به کوکی به این صورت می باشد که ابتدا نام پارامتر و مقدار آن را نوشته و بعد از آن یک علامت ; و بعد از این علامت یک فاصله گذاشته و بعد پارامتر بعدی را می نویسیم.
پارامتر domain: وقتی یک کوکی برای یک صفحه ایجاد می کنیم، آن کوکی فقط توسط صفحات موجود در آن سرویس دهنده قابل دستیابی است. با این پارامتر می توان کوکی را در اختیار سرویس دهنده
های دیگر قرار داد.
secure: این پارامتر به مرورگر می گوید که این کوکی باید در اتصال امنی ارسال شود. یعنی مرورگر و سرویس دهنده باید از امنیت HTTP پشتیبانی کنند. اگر از این پارامتر استفاده نشود، کوکی بدون رمزگذاری در شبکه ارسال می شود.
بخش سوم : بازیابی مقادیر کوکی ها
| ۱ function getCookie(name) ۲ { ۳ Var myCookie= ” ” +document.cookie +”;” ; ۴ var searchName=” ” + name + “=”; ۵ Var search = myCookie.indexOf (searchName); ۶ if (Search != -1) ۷ { search+=searchName.length; } ۸ } |
۱
برای بازیابی یک کوکی که از قب ساخته شده،از یک تابع استفاده کردیم که پارامتر آن name یعنی نام کوکی است، متغیر searchName نام کوکی را نگهداری می کند. متغیر search کوکی را بررسی می کند و با دستور if تعیین کردیم که اگر search !=-1، یعنی کوکی دارای مقدار بود، طول مقدار آن کوکی را در متغیر search ذخیره کند.متد indexOf محل وقوع رشته ای را که در پرانتز قرار دارد را برمی گرداند حالا که کمی با کوکی ها آشنا شدید در این قسمت برای کوکی نام انتخاب می کنیم، به دستورات زیر توجه کنید:
| ۱ function getCookie(name) ۲ { ۳ var Search = thisCookie.indexOf(name + “=”); ۴ if(Search == -1) ۵ { document.write(“ثبت نام کنید”); } ۶ return null; |
خوب این یک قسمت کوچیک از کدهای کوکی شناسایی کاربر است که اگر کوکی مقدار نداشته باشد یعنی کاربر چیزی را وارد نکرده باشد در صفحه برای او جمله ی ثبت نام کنید نمایش داده می شود .شما برای اینکه به این کوکی نامی دهید می توانید از روش زیر استفاده کنید:
| ۱ var usernameCookie= getCookie(“Username”); |
در این صورت کلمه Username که در پرانتز قرار دارد برای تابع getCookie فرستاده شده و به عنوان نام کوکی در نظر گرفته می شود، و مقدار تابع یعنی کدهایی که برای کوکی در تابع نوشته ایم هم در متغیر usernameCookie ذخیره می شود و این متغیر می شود همان مقدار کوکی و در نهایت دستور زیر کوکی Username را می سازد و آن را مقداردهی میکند.
| ۱ document.cookie=” Username =”+ usernameCookie + “; expires=”+ expDate; |
البته این یک مثال ساده بود و دستوری که در تابع نوشته شده یک کوکی کامل نیست و همانطور که می دانید ما به یک فرم هم نیاز داریم تا کاربر بتواند نام خود را وارد کرده و ثبت نام کند.
بخش آخر: حذف کوکی
برای حذف یک کوکی باید زمان انقضای آن را به زمانی قبل از زمان فعلی تغییر دهیم.
| ۱ Function clearCookie (name) ۲ { ۳ Var pastDate=2*24*60; ۴ Var expDate=newDate(); ۵ expDate.setTime(expDate.getTime() – pastDate); ۶ document.cookie =” name=” + value + “; expires=” + expDate; ۷ } |
من در این جلسه قصد داشتم شما را با مفاهیم اولیه کوکی ها آشنا کنم و سعی می کنم در یکی از جلسات، یک نمونه کوکی کامل را برای شما بنویسم.
