کوکی‌ها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
JavaScript-menu.png
موارد آموزشی
فرم‌ها در جاوا اسکریپت
تعریف شیء در جاوا اسکریپت
تابع در جاوا اسکریپت
HTML DOM در جاوا اسکریپت
Browser BOM در جاوا اسکریپت
۱پنجره
۲پنجرهٔ صفحه نمایش
۳موقعیت پنجره
۴تاریخچهٔ پنجره
۵ناوبری پنجره
۶جعبهٔ پیغام
۷رویدادهای زمان‌بندی شده
۸کوکی‌ها
AJAX در جاوا اسکریپت
JSON در جاوا اسکریپت
جی‌کوئری در برابر جاوا اسکریپت
مثال‌های جاوا اسکریپت
مرجع جاوا اسکریپت

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

کوکی ها چی هستند؟

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

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

کوکی برای حل مشکل «چطور اطلاعات مربوط به کاربر را به یاد بیاوریم» طراحی شده‌اند:

  • زمانی که یک کاربر یک صفحه وب را بازدید می‌کند، نام او می‌تواند در یک کوکی ذخیره شود
  • دفعه بعدی که کاربر آن صفحه وب را بازدید کرد، کوکی نام او را به یاد می‌آورد

کوکی‌ها به صورت جفت‌هایی از نام-مقدار ساخته می‌شوند، مانند:

username = John Doe

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

هیچ‌یک از مثال‌ها زیر در صورتی که مرورگر شما از کوکی‌های محلی (به انگلیسی: local) پشتیبانی نکند، کار نخواهند کرد.

ساخت یک کوکی با جاوا اسکریپت

جاوا اسکریپت می‌تواند به وسیله ویژگی document.cookie، کوکی‌ها را ایجاد کند، آنها را بخواند یا حذف کند.

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

document.cookie = "username=John Doe";

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

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";

با پارامتر مسیر (به انگلیسی: path)، شما می‌توانید به مرورگر بگویید که کوکی به کدام مسیر مربوط است، به صورت پیشفرض کوکی‌ها به صفحه جاری مربوط می‌شوند.

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

خواندن یک کوکی با جاوا اسکریپت

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

var x = document.cookie;

ویژگی document.cookie تمامی کوکی‌ها را درون یک رشته متنی مانند زیر به ما برمی‌گرداند:

cookie1=value; cookie2=value; cookie3=value;

تغییر یک کوکی با جاوا اسکریپت

با جاوا اسکریپت، شما می‌توانید یک کوکی را به همان روشی که آن را ایجاد کردید، تغییر دهید:

document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

کوکی قدیمی بازنویسی می‌شود.

حذف یک کوکی با جاوا اسکریپت

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

شما نیاز ندارید زمانی که می‌خواهید یک کوکی راحذف کنید، آن را مشخص کنید.

فقط پارامتر انقضا را به یک تاریخ گذشته، تغییر دهید.

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;

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


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

مثال کوکی در جاوا اسکریپت

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

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

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

برای مثال، ما سه تابع جاوا اسکریپت ایجاد خواهیم کرد:

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

یک تابع برای تنظیم مقدار کوکی

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

مثال

1 function setCookie(cname, cvalue, exdays) {
2   var d = new Date();
3   d.setTime(d.getTime() + (exdays*24*60*60*1000));
4   var expires = "expires="+ d.toUTCString();
5   document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
6 }

توضیح مثال:

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

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

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

سپس ما یک function می‌سازیم که مقدار یک کوکی به خصوص را برمی‌گرداند:

مثال

 1 function getCookie(cname) {
 2   var name = cname + "=";
 3   var decodedCookie = decodeURIComponent(document.cookie);
 4   var ca = decodedCookie.split(';');
 5   for(var i = 0; i <ca.length; i++) {
 6     var c = ca[i];
 7     while (c.charAt(0) == ' ') {
 8       c = c.substring(1);
 9     }
10     if (c.indexOf(name) == 0) {
11       return c.substring(name.length, c.length);
12     }
13   }
14   return "";
15 }

توضیح تابع:

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

یک متغیر (name) با متنی مورد جستجو می‌سازد. (cname + "=")

رشته کوکی را decode (به فارسی: رمزگشایی) می‌کند تا کوکی‌های با کاراکتر مخصوص برای مثال ′$′ را مدیریت کند.

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

یک حلقه درون آرایه ca ایجاد می‌کند(i = 0; i < ca.length; i++)، و مقدار هر c = ca[i] را می‌خواند.

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

اگر کوکی پیدا نشد، مقدار "" بر می‌گردد.

یک تابع برای بررسی یک کوکی

در آخر، ما یک تابع می‌سازیم که بررسی می‌کند آیا کوکی ساخته شده‌است یا خیر.

اگر کوکی ساخته شده باشد، تابع پیغام خوش‌آمدگویی نمایش می‌دهد.

اگر کوکی ساخته نشده قباشد، این تابع یک جعبه اعلان نمایش خواهد داد که از کاربر نام او را دریافت می‌کند و نام کاربر را در قالب یک کوکی برای ۳۶۵ روز به وسیله فراخوانی متد setCookie ذخیره می‌کند:

مثال

 1 function checkCookie() {
 2   var username = getCookie("username");
 3   if (username != "") {
 4    alert("Welcome again " + username);
 5   } else {
 6     username = prompt("Please enter your name:", "");
 7     if (username != "" && username != null) {
 8       setCookie("username", username, 365);
 9     }
10   }
11 }

تمامی بخش ها در یک مثال

مثال

 1 function setCookie(cname, cvalue, exdays) {
 2   var d = new Date();
 3   d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
 4   var expires = "expires="+d.toUTCString();
 5   document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
 6 }
 7 
 8 function getCookie(cname) {
 9   var name = cname + "=";
10   var ca = document.cookie.split(';');
11   for(var i = 0; i < ca.length; i++) {
12     var c = ca[i];
13     while (c.charAt(0) == ' ') {
14       c = c.substring(1);
15     }
16     if (c.indexOf(name) == 0) {
17       return c.substring(name.length, c.length);
18     }
19   }
20   return "";
21 }
22 
23 function checkCookie() {
24   var user = getCookie("username");
25   if (user != "") {
26     alert("Welcome again " + user);
27   } else {
28     user = prompt("Please enter your name:", "");
29     if (user != "" && user != null) {
30       setCookie("username", user, 365);
31     }
32   }
33 }


مشاهدهٔ نتیجه


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


منابع آموزشی