JavaScript:کوکی‌های جاوااسکریپت
کوکی‌ها به شما اجازه می‌دهد که اطلاعات کاربر را در صفحات وب ذخیره کنید. [۱]
محتویات
- ۱ کوکی‌ها چی هستند؟
- ۲ ساخت یک کوکی با جاوااسکریپت
- ۳ خواندن یک کوکی با جاوااسکریپت
- ۴ تغییر یک کوکی با جاوااسکریپت
- ۵ حذف یک کوکی با جاوااسکریپت
- ۶ رشته متنی کوکی
- ۷ مثال کوکی در جاوااسکریپت
- ۸ یک تابع برای تنظیم مقدار کوکی
- ۹ یک تابع برای دریافت یک کوکی
- ۱۰ یک تابع برای بررسی یک کوکی
- ۱۱ تمامی بخش‌ها در یک مثال
- ۱۲ منابع آموزشی
کوکی‌ها چی هستند؟
کوکی‌ها داده‌هایی هستند که در فایل‌های متنی کوچک، روی رایانه شما ذخیره شده‌اند.
زمانی یک وب سرور یک صفحه وب را به یک مرورگر وب ارسال می‌کند، ارتباط بین این دو قطع می‌شود و سرور همه چیز را در مورد کاربر فراموش می‌کند.
کوکی برای حل مشکل «چطور اطلاعات مربوط به کاربر را به یاد بیاوریم» طراحی شده‌اند:
- زمانی که یک کاربر یک صفحه وب را بازدید می‌کند، نام او می‌تواند در یک کوکی ذخیره شود.
- دفعه بعدی که کاربر آن صفحه وب را بازدید کرد، کوکی نام او را به یاد می‌آورد.
کوکی‌ها به صورت جفت‌هایی از نام-مقدار ساخته می‌شوند، مانند:
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;
اگر شما می‌خواهید مقداری از یک کوکی به خصوص را پیدا کنید، شما می‌بایست یک تابع جاوااسکریپت برای جستجو مقدار کوکی در یک رشته متنی کوکی بنویسید.
مثال کوکی در جاوااسکریپت
در مثال زیر، ما یک کوکی خواهیم ساخت که نام یک بازدیدکننده را ذخیره می‌کند.
بار اولی که بازدیدکننده صفحه وب را بازدید می‌کند، از او درخواست می‌شود که نام خود را وارد کند. سپس نام کاربر در یک کوکی ذخیره می‌شود.
دفعه بعدی که کاربر همان صفحه را بازدید می‌کند، یک پیغام خوش آمدگویی دریافت خواهد کرد.
برای مثال، ما سه تابع جاوااسکریپت ایجاد خواهیم کرد:
- یک تابع برای تنظیم مقدار کوکی
- یک تابع برای دریافت مقدار کوکی
- یک تابع برای بررسی مقدار یک کوکی
یک تابع برای تنظیم مقدار کوکی
ابتدا، ما یک functionایجاد می‌کنیم که نام کاربر را در یک متغیر کوکی ذخیره می‌کند:
مثال
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
توضیح مثال:
پارامترهای تابع فوق عبارتند از: نام کوکی (cname)، مقدار کوکی (cvalue) و تعداد روزهایی که کوکی می‌بایست بعد از آن منقضی شود (exdays).
تابع با اضافه کردن نام کوکی، مقدار کوکی و مدت زمان انقضا یک کوکی می‌سازد.
یک تابع برای دریافت یک کوکی
سپس ما یکfunctionمی‌سازیم که مقدار یک کوکی به خصوص را برمی‌گرداند:
مثال
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
توضیح تابع:
نام کوکی را به عنوان پارامتر ورودی (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ذخیره می‌کند:
مثال
function checkCookie() {
var username = getCookie("username");
if (username != "") {
alert("Welcome again " + username);
} else {
username = prompt("Please enter your name:", "");
if (username != "" && username != null) {
setCookie("username", username, 365);
}
}
}
تمامی بخش‌ها در یک مثال
مثال
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var user = getCookie("username");
if (user != "") {
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:", "");
if (user != "" && user != null) {
setCookie("username", user, 365);
}
}
}
مثال فوق، متدcheckCookie()را زمانی که صفحه بارگذاری شد اجرا می‌کند.
منابع آموزشی