به نام خدا با عرض سلام و احترام خدمت شما دوستان عزیز. در ادامه آموزش جاوا اسکریپت این جلسه قصد داریم به مبحث کوکی ها در جاوا اسکریپت بپردازیم.با ما همراه باشید.
کوکی ( Cookie ) چیست؟
یک فایل متنی کوچک است. که معمولاً برای ردیابی اطلاعاتی مانند تنظیمات اولویت کاربرها استفاده می شوند.تا زمانی که کاربر دفعه بعد از وب سایت بازدید می کند. سایت بتواند برای شخصی سازی صفحه را بازیابی کند.
کوکی ها یک مکانیسم ذخیره سازی قدیمی سمت کلاینت هستند. که در ابتدا برای استفاده توسط زبان های برنامه نویسی سمت سرور مانند PHP، ASP و … طراحی شده بودند. با این حال، کوکی‌ها را نیز می‌توان مستقیماً با استفاده از جاوا اسکریپت ایجاد، دسترسی و اصلاح کرد.
نکته: یک کوکی می‌تواند تا 4 کیلوبایت باشد. از جمله نام و مقادیر آن. کوکی‌هایی که از این طول بیشتر می‌شوند به‌گونه‌ای برش می یابند که مناسب باشند.
کوکی ها در جاوا اسکریپت
ایجاد کوکی در جاوا اسکریپت
در جاوا اسکریپت، می‌توانید کوکی‌ها را با پراپرتی document.cookie ایجاد، بخوانید و حذف کنید. این ویژگی تمام کوکی های مرتبط با یک سند را نشان می دهد.
برای ایجاد یا ذخیره یک کوکی جدید، یک رشته name=value به این پراپرتی اختصاص دهید. مانند:
document.cookie = "firstName=Christopher";
()encodeURIComponent برای کدگذاری مقادیر حاوی این کاراکترها قبل از ذخیره آن در کوکی استفاده کنید.به همین ترتیب، هنگام خواندن مقدار کوکی، باید از تابع ()decodeURIComponent مربوطه استفاده کنید.document.cookie = "name=" + encodeURIComponent("Christopher Columbus");
به طور پیش فرض، طول عمر یک کوکی نشست فعلی مرورگر است، به این معنی که وقتی کاربر از مرورگر خارج می شود، از بین می رود.برای اینکه یک کوکی بیشتر از جلسه مرورگر فعلی باقی بماند، باید طول عمر آن را (بر حسب ثانیه) با ویژگی max-age مشخص کنید.این ویژگی تعیین می کند که یک کوکی قبل از حذف چقدر می تواند در سیستم کاربر باقی بماند، به عنوان مثال،کوکی زیر 30 روز زنده خواهد ماند.
document.cookie = "firstName=Christopher; max-age=" + 30*24*60*60;
همچنین می توانید طول عمر یک کوکی را با ویژگی expiresمشخص کنید.این ویژگی یک تاریخ دقیق (در قالب GMT/UTC) زمانی که کوکی باید منقضی شود، به جای افست در چند ثانیه می گیرد.
document.cookie = "firstName=Christopher; expires=Thu, 31 Dec 2099 23:59:59 GMT";
در اینجا تابعی وجود دارد که یک کوکی را با ویژگی max-ageاختیاری تنظیم می کند.همچنین می‌توانید از همین تابع برای حذف یک کوکی با عبور مقدار 0 برای پارامتر daysToLive استفاده کنید.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set and Get Cookies in JavaScript</title>
</head>
<body>
<script>
// A custom function to set cookies
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;
}
}
// A custom function to get cookies
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;
}
// A custom function to check cookies
function checkCookie() {
// Get cookie using our custom function
var firstName = getCookie("firstName");
if(firstName != null) {
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, 1);
}
}
}
// Check the cookie on page load
window.onload = checkCookie;
// Uncomment the following line to delete this cookie
// setCookie("firstName", "", 0);
</script>
<p><strong>Note:</strong> Now if you press the "Show Output" button or refresh the page, you will see a greeting message, if you've entered your first name in the prompt dialog box. See the last line of the JavaScript code to know how to delete this <b>firstName</b> cookie.</p>
</body>
</html>
path را مشخص کنید. کوکی برای همه صفحات وب در مسیر مشخص شده و برای همه صفحات وب در همه زیر شاخه های آن مسیر در دسترس است.به عنوان مثال، اگر مسیر روی / تنظیم شده باشد، کوکی در سراسر یک وب سایت در دسترس است. صرف نظر از اینکه کدام صفحه کوکی را ایجاد می کند.document.cookie = "firstName=Christopher; path=/";
domain در دسترس باشد. می‌توانید از ویژگی دامنه استفاده کنید.به طور پیش‌فرض، کوکی‌ها فقط برای صفحات دامنه‌ای که در آن تنظیم شده‌اند در دسترس هستند.اگر یک کوکی ایجاد شده توسط یک صفحه در blog.example.com ویژگی pathخود را به/ و ویژگی domainخود را روی example.com قرار دهد. آن کوکی همچنین برای همه صفحات وب در backend.example.com, portal.example.com در دسترس است. با این حال، شما نمی توانید کوکی ها را خارج از یک دامنه به اشتراک بگذارید.
document.cookie = "firstName=Christopher; path=/; domain=example.com";
همچنین یک ویژگی بولی به نام secureوجود دارد. اگر این ویژگی مشخص باشد، کوکی فقط از طریق یک اتصال امن مانند HTTPS منتقل می شود.
document.cookie = "firstName=Christopher; path=/; domain=example.com; secure";
نحوه خواندن یک کوکی
با مبحث کوکی ها در جاوا اسکریپت همراه شماه هستیم. خواندن یک کوکی کمی پیچیده‌تر است، زیرا ویژگی document.cookie به سادگی یک رشته حاوی یک سمی کالن و یک لیست با فاصله از همه کوکی‌ها را برمی‌گرداند.(یعنی جفت های name=value، برای مثال , ;firstName=John; lastName=Doe).این رشته دارای ویژگی هایی مانند expires, path, domain و …نیست که ممکن است برای کوکی تنظیم شده باشد.
برای به دست آوردن کوکی منحصر به فرد از این لیست، باید از متد()split برای شکستن آن به جفت‌های منحصر به فرد name=value استفاده کنید. و نام خاص را مانند شکل زیر جستجو کنید:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set and Get Cookies in JavaScript</title>
</head>
<body>
<script>
// A custom function to set cookies
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;
}
}
// A custom function to get cookies
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;
}
// A custom function to check cookies
function checkCookie() {
// Get cookie using our custom function
var firstName = getCookie("firstName");
if(firstName != null) {
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, 1);
}
}
}
// Check the cookie on page load
window.onload = checkCookie;
// Uncomment the following line to delete this cookie
// setCookie("firstName", "", 0);
</script>
<p><strong>Note:</strong> Now if you press the "Show Output" button or refresh the page, you will see a greeting message, if you've entered your first name in the prompt dialog box. See the last line of the JavaScript code to know how to delete this <b>firstName</b> cookie.</p>
</body>
</html>
اکنون می‌خواهیم یک تابع ()checkCookie ایجاد کنیم. که با استفاده از تابع ()getCookie بالا بررسی می‌کند. که آیا کوکی firstNameتنظیم شده است یا نه. و اگر تنظیم شود، این تابع یک پیام تبریک نمایش می‌دهد. و اگر نه این تابع از کاربر می خواهد که نام کوچک خود را وارد کرده و با استفاده از تابع ()setCookie که قبلا ایجاد شده بود، آن را در کوکی ذخیره کند.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set and Get Cookies in JavaScript</title>
</head>
<body>
<script>
// A custom function to set cookies
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;
}
}
// A custom function to get cookies
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;
}
// A custom function to check cookies
function checkCookie() {
// Get cookie using our custom function
var firstName = getCookie("firstName");
if(firstName != null) {
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, 1);
}
}
}
// Check the cookie on page load
window.onload = checkCookie;
// Uncomment the following line to delete this cookie
// setCookie("firstName", "", 0);
</script>
<p><strong>Note:</strong> Now if you press the "Show Output" button or refresh the page, you will see a greeting message, if you've entered your first name in the prompt dialog box. See the last line of the JavaScript code to know how to delete this <b>firstName</b> cookie.</p>
</body>
</html>
به روز رسانی یک کوکی در جاوا اسکریپت
تنها راه برای به روز رسانی یا اصلاح یک کوکی، ایجاد کوکی دیگری با name وpathمشابه کوکی موجود است.ایجاد یک کوکی با نام مشابه اما با مسیری متفاوت، سپس کوکی موجود، یک کوکی اضافی اضافه می کند. به عنوان مثال:
// 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آن را روی 0 قرار دهید.به یاد داشته باشید که اگر pathوdomain را برای کوکی مشخص کرده‌اید، باید هنگام حذف آن را نیز درج کنید.// 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 ، کافی است. مقدار آن (یعنی تاریخ انقضا) را روی تاریخی تنظیم کنید که قبلاً گذشته است.
به عنوان مثال:
document.cookie = "firstName=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";
خب دوستان گرامی به پایان جلسه کوکی ها در جاوا اسکریپت رسیدیم امیدواریم مورد توجه شما قرار گیرد.
سایر مقالات:
اعتبار سنجی فرم ها در جاوا اسکریپت
دیدگاهتان را بنویسید