درس شانزدهم- کوکی‌ها در جاوا اسکریپت
حتم داریم که تا به حال نام کوکی‌ها را شنیده‌اید و یا از آن استفاده کرده‌اید. بطور حتم در تارنما‌های متفاوت نمونه‌هایی را مشاهده کرده‌اید. برای نمونه تارنما‌هایی که به هنگام ورود ابتدا نام شما را گرفته و پس از آن با هر بار ورود به آن تارنما شما را شناخته و به شما خوش آمد می‌گویند. در این درس یاد می‌گیریم که چگونه به کوکی‌ها مقدار داده و سپس مقادیر آنها را بازیابی کنیم.
کوکی‌ها در جاوا اسکریپت
وقتی
که کاربر نشانی تارنمایی را در قسمت نشانی مرورگر می‌نویسد، مرورگر
درخواست بازدید تارنما را برای سرور ارسال می‌کند. سرور درخواست را از
مرورگر می‌گیرد و صفحه وب را برای مرورگر (کاربر) باز می‌فرستد. پس از
فرستادن صفحه وب توسط سرور برای مرورگر، ارتباط سرور و مرورگر پایان
می‌یابد و سرور هیچ داده‌ای را از مرورگر (کاربر) در خود ندارد. اگر دوباره
کاربر برای سرور درخواستی بفرستد این ارتباط بدون در نظر گرفتن ارتباط
پیشین دوباره شکل می‌گیرد. اینجاست که «کوکی‌ها» پا به وسط گذاشته و برای
حفظ شناسایی ارتباط کاربر و سرور داده‌هایی را در خود نگه داری می‌کنند.
کوکی‌ها در اصل داده‌هایی هستند حاوی اطلاعاتی که در رایانه کاربر ثبت
می‌شوند. این اطلاعات به سرور اجازه می‌دهد تا کاربر را پس از ارجاع دوباره
شناسایی کند. برای نمونه کاربرد کوکی‌ها در این است که وقتی کاربر به
تارنمایی مراجعه کرد نام او ثبت شده و در مراجعه بعدی سرور نام او را بداند.
پس از بکارگیری کوکی‌های، وقتی کاربر توسط مرورگر خود درخواستی را برای سرور می‌فرستد همراه آن درخواست کوکی‌ها (داده‌هایی در مورد کاربر) ارسال می‌شوند. به این ترتیب سرور داده‌هایی در مورد کاربر را در اختیار دارد و با دیدن آنها، کاربر را شناسایی می‌کند.
ساخت کوکی‌ها در جاوا اسکریپت
کوکی‌ها در جاوا اسکریپت به شیوه زیر ساخته می‌شوند:
document.cookie="username=پیمان";
جاوا اسکریپت توسط ویژگی «document.cookie» توانایی ساختن، خواندن و پاک کردن کوکی‌ها را دارا می‌باشد.
در زمان ساخت یک کوکی می‌توانیم به آن زمانی برای از بین رفتن اعتبار منتسب کنیم. به این شکل بعد از مدت معینی که ما مشخص می‌کنیم اعتبار آن کوکی از بین رفته و دیگر از طرف سرور به رسمیت شناخته نمی‌شود:
document.cookie="username=پیمان; expires=Thu, 12 Dec 2013 11:00:00 GMT";
خواندن کوکی‌ها در جاوا اسکریپت
شیوه خوانده شدن کوکی‌ها در جاوا اسکریپت به شکل زیر می‌باشد:
var x = document.cookie;
به این ترتیب محتوای کوکی در متغیر x قرار می‌گیرد.
نکته: ویژگی document.cookie این است که محتوای کوکی‌ها را بصورت یک رشته باز می‌گرداند.
کوکی1=مقدار; کوکی2= ... مقدار;
تغییر کوکی در جاوا اسکریپت
برای تغییر یک کوکی در جاوا اسکریپت کافیست بر روی کوکی از پیش ساخته شده مقدار تازه‌ای را منتسب کنید.
document.cookie="username=شهروز; expires=Thu, 22 Dec 2014 12:00:00 GMT";
پاک کردن کوکی‌ها
برای پاک کردن کوکی‌ها شما باید تاریخ از بین رفتن کوکی را به زمانی در گذشته تغییر بدهید.
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
نکته: در زمان پاک کردن کوکی نیازی به منتسب کردن مقدار در آن (username) ندارید.
نکته: در قسمت تغییر کوکی‌ها گفتیم کافیست شما مقدار تازه را جایگزین مقدار پیشین کنید. اگر شما مقدار تازه‌ای را با نام دیگری به کوکی‌ها اضافه کنید، کوکی پیشین از بین نرفته و در پیش از کوکی تازه قرار می‌گیرد.
مکان ثبت کوکی‌ها
بطور طبیعی کوکی‌ها در مکانی ذخیره می‌شوند که صفحات وب در آنجا ایجاد شده‌اند. با استفاده از پارامتر path می‌توان کوکی‌ها را در محل دلخواه خود ذخیره کرد. کد زیر کوکی cookie1 را برای هر صفحه‌ای که در فولدر testcookie قرار دارد آماده می‌کند.
document.cookie="cookie1=مقدار; path=/testcookie" ;
نمونه ساخت کوکی‌ها
<!DOCTYPE html>
<html> <head> <script>
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
{
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
}
function checkCookie() {
var user=getCookie("username");
if (user != "") {
alert("خوش آمدید " + user);
} else {
user = prompt("نام خود را وارد کنید:","");
if (user!="" && user!=null) {
setCookie("username",user, 365);
} } }
</script></head>
<body onload="checkCookie()"></body>
</html>
در این نمونه سه تابع setCookie، getCookie و checkCookie برای ساختن کوکی، گرفتن کوکی و خواندن کوکی ساخته شده است.
تابع ساختن کوکی setCookie
تابع setCookie برای
ساخت کوکی می‌باشد. این تابع دارای سه پارامتر است: نام کوکی ()، مقدار
کوکی () و زمان از بین رفتن یا مدت زمان اعتبار داشتن کوکی:
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname + "=" + cvalue + " ; " + expires ; }
d.setTime(d.getTime()+(exdays*24*60*60*1000));
setTime هم یکی دیگر از متدهای آبجکت Date است که با این متد می‌توانیم بصورت دستی یک زمان را برای این آبجکت تعیین کنیم.
var expires = "expires="+d.toGMTString();
در اینجا با استفاده از متد toGMTString که یکی از متدهای آبجکت Date است، و تاریخ را به وقت گرینویچ تعیین می‌کند، تاریخ موجود در متغیر d را به این فرمت تبدیل کرده و آن را در پارامتر expires کوکی می‌ریزیم.
تابع گرفتن کوکی getCookie
این تابع برای دریافت کوکی ساخته می‌شود که نام کوکی را به عنوان پارامتری دریافت می‌کند.
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length); }
return ""; }
برای دریافت یک کوکی که از پیش ساخته شده از این تابع استفاده می‌کنیم که پارامتر آن cname -نام کوکی- است ، متغیر name نام کوکی را نگهداری می‌کند. متغیر آرایه‌ای ca کوکی را بصورت جدا جدا دریافت می‌کند. سپس با کمک حلقه آرایه ca را بررسی می‌کنیم و تمام مقادیر آن را می‌خوانیم. اگر کوکی پیدا شود مقدار آن را ارسال می‌کنیم و اگر کوکی یافت نشود مقدار «""» را ارسال می‌کنیم.
تابع خواندن و بررسی کوکی checkCookie
این
تابع بررسی می‌کند که آیا کوکی ساخته شده است یا نه! اگر کوکی وجود داشته
باشد پیغام خوش آمد گویی را نشان می‌دهد اما اگر کوکی وجود نداشته باشد،
کادری (جعبه دستور) را برای دریافت نام کاربر نشان داده و آن کوکی را با
اعتبار یک سال ذخیره می‌کند.
function checkCookie() {
var user=getCookie("username");
if (user != "") {
alert("خوش آمدید " + user);
} else {
user = prompt("نام خود را وارد کنید:","");
if (user!="" && user!=null) {
setCookie("username",user, 365);
} } }
نکته قابل توجه اجرای این تابع است که زمان بالا آمدن برگه صورت می‌گیرد:
<body onload="checkCookie()">
اگر قبلا در بیان ثبت نام کرده اید لطفا ابتدا وارد شوید، در غیر این صورت می توانید ثبت نام کنید.