به نام خدا با عرض سلام و احترام خدمت شما دوستان عزیز. در ادامه آموزش جاوا اسکریپت این جلسه قصد داریم به مبحث کوکی ها در جاوا اسکریپت بپردازیم.با ما همراه باشید.

کوکی ( Cookie ) چیست؟

یک فایل متنی کوچک است. که معمولاً برای ردیابی اطلاعاتی مانند تنظیمات اولویت کاربرها استفاده می شوند.تا زمانی که کاربر دفعه بعد از وب سایت بازدید می کند. سایت بتواند برای شخصی سازی صفحه را بازیابی کند.

کوکی ها یک مکانیسم ذخیره سازی قدیمی سمت کلاینت هستند. که در ابتدا برای استفاده توسط زبان های برنامه نویسی سمت سرور مانند PHP، ASP و … طراحی شده بودند. با این حال، کوکی‌ها را نیز می‌توان مستقیماً با استفاده از جاوا اسکریپت ایجاد، دسترسی و اصلاح کرد.

نکته: یک کوکی می‌تواند تا 4 کیلوبایت باشد. از جمله نام و مقادیر آن. کوکی‌هایی که از این طول بیشتر می‌شوند به‌گونه‌ای برش می یابند که مناسب باشند.

هشدار: داده‌های حساس مانند رمز عبور یا اطلاعات کارت اعتباری را در کوکی‌ها ذخیره نکنید زیرا ممکن است توسط کاربر مخرب دستکاری شود.

کوکی ها در جاوا اسکریپت

ایجاد کوکی در جاوا اسکریپت

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

برای ایجاد یا ذخیره یک کوکی جدید، یک رشته name=value به این پراپرتی اختصاص دهید. مانند:

document.cookie = "firstName=Christopher";

1	document.cookie = "firstName=Christopher";

مقدار کوکی نمی تواند حاوی سمی کالن، کاما یا فاصله باشد.به همین دلیل، باید از تابع داخلی جاوا اسکریپت ()encodeURIComponent برای کدگذاری مقادیر حاوی این کاراکترها قبل از ذخیره آن در کوکی استفاده کنید.به همین ترتیب، هنگام خواندن مقدار کوکی، باید از تابع ()decodeURIComponent مربوطه استفاده کنید.

document.cookie = "name=" + encodeURIComponent("Christopher Columbus");

1	document.cookie = "name=" + encodeURIComponent("Christopher Columbus");

به طور پیش فرض، طول عمر یک کوکی نشست فعلی مرورگر است، به این معنی که وقتی کاربر از مرورگر خارج می شود، از بین می رود.برای اینکه یک کوکی بیشتر از جلسه مرورگر فعلی باقی بماند، باید طول عمر آن را (بر حسب ثانیه) با ویژگی max-age مشخص کنید.این ویژگی تعیین می کند که یک کوکی قبل از حذف چقدر می تواند در سیستم کاربر باقی بماند، به عنوان مثال،کوکی زیر 30 روز زنده خواهد ماند.

document.cookie = "firstName=Christopher; max-age=" + 30*24*60*60;

1	document.cookie = "firstName=Christopher; max-age=" + 302460*60;

همچنین می توانید طول عمر یک کوکی را با ویژگی expiresمشخص کنید.این ویژگی یک تاریخ دقیق (در قالب GMT/UTC) زمانی که کوکی باید منقضی شود، به جای افست در چند ثانیه می گیرد.

document.cookie = "firstName=Christopher; expires=Thu, 31 Dec 2099 23:59:59 GMT";

1	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>

<!DOCTYPE html>

<head>

<title>Set and Get Cookies in JavaScript</title>

</head>

<body>

// 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=/";

1	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";

1	document.cookie = "firstName=Christopher; path=/; domain=example.com";

همچنین یک ویژگی بولی به نام secureوجود دارد. اگر این ویژگی مشخص باشد، کوکی فقط از طریق یک اتصال امن مانند HTTPS منتقل می شود.

document.cookie = "firstName=Christopher; path=/; domain=example.com; secure";

1	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>

<!DOCTYPE html>

<head>

<title>Set and Get Cookies in JavaScript</title>

</head>

<body>

// 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>

</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>

<!DOCTYPE html>

<head>

<title>Set and Get Cookies in JavaScript</title>

</head>

<body>

// 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>

</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;

// 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";

// 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";

1	document.cookie = "firstName=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";

خب دوستان گرامی به پایان جلسه کوکی ها در جاوا اسکریپت رسیدیم امیدواریم مورد توجه شما قرار گیرد.

سایر مقالات:

اعتبار سنجی فرم ها در جاوا اسکریپت

ریجکس در جاوا اسکریپت

برای امتیاز به این نوشته کلیک کنید!

[کل: 2 میانگین: 5]

اشتراک‌گذاری

اعتبار سنجی فرم ها در جاوا اسکریپت نوشته قبل

Ajax در جاوا اسکریپت نوشته بعد

علی فرجی

علی فرجی هستم، برنامه نویس جاوا اسکریپت و ریکت با بیش از 5 سال تجربه. من عاشق برنامه نویسیم و همیشه به دنبال یادگیری چیزهای جدید هستم.همچنین یکی از بنیانگذار های سایت کدایت ، یک سایت آموزش برنامه نویسی در حوزه جاوا اسکریپت، ریکت، اندروید و ... هستم. امیدوارم بتوانم با دانش و تجربه خود به سایر برنامه نویسان کمک کنم تا در این زمینه پیشرفت کنند.