کوکی‌ها
کوکی‌ها به شما اجازه می‌دهد که اطلاعات کاربر را در صفحات وب ذخیره کنید. [۱]
محتویات
- ۱ کوکی ها چی هستند؟
- ۲ ساخت یک کوکی با جاوا اسکریپت
- ۳ خواندن یک کوکی با جاوا اسکریپت
- ۴ تغییر یک کوکی با جاوا اسکریپت
- ۵ حذف یک کوکی با جاوا اسکریپت
- ۶ رشته متنی کوکی
- ۷ مثال کوکی در جاوا اسکریپت
- ۸ یک تابع برای تنظیم مقدار کوکی
- ۹ یک تابع برای دریافت یک کوکی
- ۱۰ یک تابع برای بررسی یک کوکی
- ۱۱ تمامی بخش ها در یک مثال
- ۱۲ منابع آموزشی
کوکی ها چی هستند؟
کوکی‌ها داده‌ها هستند که در فایل‌های متنی کوچک، روی رایانه شما ذخیره شده‌اند.
زمانی یک وب سرور یک صفحه وب را به یک مرورگر وب ارسال می‌کند، ارتباط بین این دو قطع می‌شود و سرور همه چیز را در مورد کاربر فراموش می‌کند.
کوکی برای حل مشکل «چطور اطلاعات مربوط به کاربر را به یاد بیاوریم» طراحی شده‌اند:
- زمانی که یک کاربر یک صفحه وب را بازدید می‌کند، نام او می‌تواند در یک کوکی ذخیره شود
- دفعه بعدی که کاربر آن صفحه وب را بازدید کرد، کوکی نام او را به یاد می‌آورد
کوکی‌ها به صورت جفت‌هایی از نام-مقدار ساخته می‌شوند، مانند:
username = John Doe
زمانی که یک مرورگر از یک سرور، یک صفحه وب را درخواست می‌کند کوکی‌ها با توجه به صفحات به درخواست اضافه می‌شوند. این راهی است که سرور اطلاعات ضروری در مورد کاربران را به یاد می‌آورد.
ساخت یک کوکی با جاوا اسکریپت
جاوا اسکریپت می‌تواند به وسیله ویژگی 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;
ساخت نمونه مثال این بخش در دست اقدام است.
اگر شما می‌خواهید مقداری از یک کوکی به خصوص را پیدا کنید، شما می‌بایست یک تابع جاوا اسکریپت برای جستجو مقدار کوکی در یک رشته متنی کوکی بنویسید.
مثال کوکی در جاوا اسکریپت
در مثال زیر، ما یک کوکی خواهیم ساخت که نام یک بازدیدکننده را ذخیره می‌کند.
بار اولی که بازدیدکننده صفحه وب را بازدید می‌کند، از او درخواست می‌شود که نام خود را وارد کند. سپس نام کاربر در یک کوکی ذخیره می‌شود.
دفعه بعدی که کاربر همان صفحه را بازدید می‌کند، یک پیغام خوش آمدگویی دریافت خواهد کرد.
برای مثال، ما سه تابع جاوا اسکریپت ایجاد خواهیم کرد:
- یک تابع برای تنظیم مقدار کوکی
- یک تابع برای دریافت مقدار کوکی
- یک تابع برای بررسی مقدار یک کوکی
یک تابع برای تنظیم مقدار کوکی
ابتدا، ما یک 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() را زمانی که صفحه بارگذاری شد اجرا می‌کند.
منابع آموزشی