در این بخش از سری آموزش جاوا اسکریپت قصد داریم به شما نحوه ایجاد, خواندن, بروزرسانی و حذف کوکی ها در جاوا اسکریپت را آموزش بدیم.
کوکی (Cookie) چیست
یک کوکی فایل متنی کوچکی است که به شما اجازه ذخیره حجم کمی از داده ها (نزدیک ۴Kb) را روی کامپیوتر کاربر می دهد.
کوکی ها در جاوا اسکریپت برای پیگیری اطلاعاتی مثل اولویت های کاربر که سایت می تواند آن ها را برای شخصی سازی صفحه برای زمان دیگری که کاربر به وبسایت سر می زند, استفاده می شوند.
کوکی ها یک مکانیزم ذخیره سازی سمت کاربر قدیمی هستند که در اصل برای استفاده در زبان های اسکریپت نویسی سمت سرور مثل PHP, ASP و غیره.. طراحی شده اند.
به هرحال, کوکی های می توانند بصورت مستقیم توسط جاوا اسکریپت ایجاد, ویرایش و قابل دسترس باشند اما این فرایند کمی پیچیده و بهم ریخته است.
نکته: یک کوکی می تواند تا ۴ کیلوبایت را ذخیره کند که شامل نام و مقادیر است. کوکی اگر این مقدار را رد کند محتوای قبلی را برای حذف می کند تا ۴ کیلوبایت را حفظ کند.
همچنین هر زمان که مرورگر درخواستی را به یک صفحه از سرور ارسال می کند, همه داده ها در کوکی بصورت خودکار همراه آن درخواست به سمت سرور ارسال می شود.
توجه: اطلاعات حساس مثل رمزهای عبور یا اطلاعات حساب را در کوکی ها ارسال نکنید چرا که امکان دستکاری آن توسط کاربر مخرب را دارد.
ساخت یک کوکی در جاوا اسکریپت
در جاوا اسکریپت, می توانید کوکی ها را با خصوصیت document.cookie
ایجاد, حذف و بخوانید.
این خصوصیت تمام کوکی های اختصاص داده شده به یک سند را دربردارد.
برای ساخت یا ذخیره یک کوکی جدید, رشته name=value
را به این خصوصیت اختصاص بدید مثل این :
document.cookie = "firstName=NetParadis";
یک کوکی نمی تواند مقادیر شامل کاما یا ; یا فاصله را داشته باشد به این دلیل که جاوا اسکریپت از تابع encodeURIComponent()
برای اینکد مقادیر شامل این کاراکترها قبل از ذخیره شده در کوکی, استفاده می کند.
همچنین نیاز دارید که از تابع decodeURIComponent()
در زمانی که قصد خواندن مقدار کوکی را دارید استفاده کنید
1 |
document.cookie = "name=" + encodeURIComponent("Hasan Shafie"); |
بصورت پیش فرض یک مدت زمان اعتبار کوکی, سشن فعلی مرورگر است به این معنی که کاربر اگر مرورگر را ببندد کوکی از بین می رود.
برای مشخص کردن یک زمان اتمام برای کوکی می توانید خصوصیت max-age
را به ثانیه مشخص کنید.
این خصوصیت مشخص می کند که چقدر طول بکشد تا کوکی از سیستم کاربر حذف شود.
مثل زیر مدت زمان آن را ۳۰ روز انتخاب کرده است :
1 |
document.cookie = "firstName=NetParadis; max-age=" + 30*24*60*60; |
همچنین می توانید زمان یک کوکی را با خصوصیت expires
مشخص کنید. این خصوصیت یک زمان دقیق (در فرمت GMT/UTC) را برای انقضای کوکی به جای استفاده از ثانیه را مشخص می کند.
1 |
document.cookie = "firstName=NetParadis; expires=Thu, 31 Dec 2099 23:59:59 GMT"; |
اینجا یک تابع برای ست کردن کوکی با خصوصیت اختیاری max-age
تعریف کردیم. می توانید از همین تابع برای حذف یک کوکی با پاس دادن مقدار ۰ به پارامتر daysToLive
استفاده کنید.
1 2 3 4 5 6 7 8 9 10 11 12 |
function setCookie(name, value, daysToLive) { // Encode value in order to escape semicolons, commas, and whitespace var cookie = name + "=" + encodeURIComponent(value); if(typeof daysToLive === "number") { /* Sets the max-age attribute so that the cookie expires after the specified number of days */ cookie += "; max-age=" + (daysToLive*24*60*60); document.cookie = cookie; } } |
بصورت پیش فرض, یک کوکی در تمام صفحات وب با دایرکتری یکسان یا هر دایرکتری فرعی از آن دایرکتری قابل دسترس است.
به هر حال, می توانید path
را برای اینکه در کدام صفحات قابل دسترس باشد, مشخص کنید.
برای مثال, اگر مقدار path
کوکی را برابر /
قرار بدید, در تمام صفحات قابل دسترس خواهد بود.
1 |
document.cookie = "firstName=NetParadis; path=/"; |
همچنین می توانید خصوصیت domain
را اگر قصد دسترسی به کوکی در ساب دامین را دارید مشخص کنید. بصورت مشخص, کوکی ها فقط در صفحاتی از دامنه که ست شدند قابل دسترس هستند.
اگر کوکی در صفحه blog.example.com
مقدار خصوصیت path
را برابر /
و خصوصیت domain
را example.com
قرار دهد, آن کوکی در صفحات backend.example.com
, portal.example.com
نیز قابل دسترس خواهد بود.
به هر حال نمی توانید کوکی ها را خارج از دامنه اصلی به اشتراک بگذارید.
1 |
document.cookie = "firstName=NetParadis; path=/; domain=example.com"; |
همچنین یک خصوصیت بولین به نام secure
وجود دارد که اگر مشخص شود, کوکی فقط بر روی ارتباط امن (رمزگذاری شده) مثل HTTPS قابل دسترس خواهد بود.
1 |
document.cookie = "firstName=NetParadis; path=/; domain=example.com; secure"; |
خواندن کوکی ها در جاوا اسکریپت
خواندن یک کوکی کمی پیچیده است چرا که خصوصیت document.cookie
مقدار رشته شامل ; و لیستی از همه کوکی ها بصورت جداشده با فاصله (جفت name=value
برای مثال firstName=Hasan; lastName=Shafie;
) را برگشت می دهد
این رشته شامل مقادیر خصوصیاتی مثل expires
, path
, domain
و .. نیست.
به منظور دریافت یک کوکی از لیست نیاز است که از متد split()
برای شکستن آن به جفت های جداگانه name=value
و جستجوی نام مشخص استفاده کنید :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
function getCookie(name) { // Split cookie string and get all individual name=value pairs in an array var cookieArr = document.cookie.split(";"); // Loop through the array elements for(var i = 0; i < cookieArr.length; i++) { var cookiePair = cookieArr[i].split("="); /* Removing whitespace at the beginning of the cookie name and compare it with the given string */ if(name == cookiePair[0].trim()) { // Decode the cookie value and return return decodeURIComponent(cookiePair[1]); } } // Return null if not found return null; } |
حالا قصد داریم یک تابع دیگر checkCookie()
به منظور بررسی اینکه کوکی firstName
ست شده است یا نه, ایجاد کنیم. و اگر ست شده باشد, پس این تابع یک پیام خوش آمد گویی را نمایش می دهد.
اگر ست نشده باشد, پس تابع یک نام را از کاربر درخواست می کند تا آن را با استفاده از تابع قبلی ذخیره کند.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function checkCookie() { // Get cookie using our custom function var firstName = getCookie("firstName"); if(firstName != "") { alert("Welcome again, " + firstName); } else { firstName = prompt("Please enter your first name:"); if(firstName != "" && firstName != null) { // Set cookie using our custom function setCookie("firstName", firstName, 30); } } } |
بروزرسانی کوکی ها در جاوا اسکریپت
تنها راه برای بروزرسانی یا ویرایش یک کوکی, ساختن یک کوکی با همان name
و path
که وجود دارد است.
1 2 3 4 5 |
// Creating a cookie document.cookie = "firstName=Christopher; path=/; max-age=" + 30*24*60*60; // Updating the cookie document.cookie = "firstName=Alexander; path=/; max-age=" + 365*24*60*60; |
حذف کوکی
برای حذف یک کوکی , کافیست همان name
را با مقدار خالی و ست کردن خصوصیت max-age
به ۰ مشخص کنید.
به خاطر داشته باشد که اگر قبلا path
و domain
را برای کوکی مشخص کرده باشید, نیاز است که آن ها را نیز هنگام حذف لحاظ کنید.
1 2 3 4 5 |
// Deleting a cookie document.cookie = "firstName=; max-age=0"; // Specifying path and domain while deleting cookie document.cookie = "firstName=; path=/; domain=example.com; max-age=0"; |
به هرحال, برای حذف یک کوکی می توانید از خصوصیت expires
نیز بهره ببرید. کافیست که تاریخ آن را برای یک زمان سپری شده مثلا سال ۱۹۹۹ با فرمت صحیحی که قبلا گفته شدست کنید تا کوکی حذف شود.
1 |
document.cookie = "firstName=; path=/; expires=Thu, 01 Jan 1999 00:00:00 GMT"; |
امیدواریم در این بخش آموزش جاوا اسکریپت, از آموزش کوکی ها در جاوا اسکریپت نهایت استفاده را برده باشد.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.