۲۵
آبان

جلسه ۹۱ : کوکی ها در جاوا اسکریپت

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

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

فهرست

کوکی ها (Cookies)

کوکی ها (Cookies) این امکان را به ما می دهند تا اطلاعات کاربران را در صفحه وب ذخیره کنیم.

کوکی ها چیستند؟

کوکی ها داده هایی هستند که در فایل های متنی کوچک بر روی کامپیوتر ذخیره می شود.

هنگامی که وب سرور یک صفحه وب را به یک مرورگر ارسال می کند، ارتباط قطع می شود و سرور هرچیزی درمورد کاربر را فراموش می کند.

کوکی ها برای حل این مشکل اختراع شده اند.

وقتی کاربر از یک صفحه وب بازدید می کند، نامش می تواند در کوکی ذخیره شود.
دفعه بعد که کاربر صفحه را بازدید می کند، کوکی نام کاربر را به یاد می آورد.

کوکی ها در جفت نام-مقدار به صورت زیر ذخیره می شوند:

مثال :

username = John Doe

1	username = John Doe

وقتی که یک یک مرورگر یک صفحه وب را از سرور درخواست می کند، کوکی های متعلق به صفحه نیز به درخواست اضافه می شوند.
از این راه سرور داده های لازم برای “یادآوری” اطلاعات کاربران را بدست می آورد.

نکته: اگر مرورگرتان پشتیبانی از کوکی های محلی local را قطع کره باشد، هیچ کدام از مثال هایی که در ادامه خواند آمد اجرا نخواهد شد.

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

جاوا اسکریپت می تواند با خاصیت (Property) document.cookie کوکی ها را ایجاد، بخواند و حذف کند.

یک کوکی در جاوا اسکریپت به صورت زیر ساخته می شود:

مثال :

document.cookie = "username=John Doe";

1	document.cookie = "username=John Doe";

به صورت پیش فرض، هنگام بسته شدن مرورگر کوکی ها نیز حذف می شوند.

با یک پارامتر path می توانید به مرورگر بگویید که کوکی به چه مسیری تعلق دارد.
به صورت پیش فرض کوکی به صفحه جاری تعلق دارد.

مثال :

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

1	document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

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

یک کوکی در جاوا اسکریپت به صورت زیر خوانده می شود:

مثال :

var x = document.cookie;

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

1	document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

کوکی ها بازنویسی خواهند شد.

حذف کوکی ها در جاوا اسکریپت

حذف کوکی ها در جاوا اسکریپت ساده است.

نباید در هنگام حذف کوکیف هیچ مقداری را مشخص کرد.

فقط پارامتر expires را به تاریخ گذشته تنظیم کنید.

مثال :

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

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

رشته کوکی ها

خاصیت document.cookie شبیه به یک متن رشته معمولی می باشد. اما این طور نیست.

اگر شما یک کوکی جدیدی را ایجاد کنید، کوکی های قدیمی بازنویسی نخواهند شد.
کوکی جدید به document.cookie اضافه می شوند.

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

مثال ساخت کوکی در جاوا اسکریپت

در ادامه برنامه ای خواهیم نوشت که کوکی بازدید کننده ها را ذخیره می کند.

ابتدا کاربر وارد صفحه وب می شود و از او خواسته می شود تا نامش را وارد کند.
نام کاربر در کوکی ذخیره می شود.

دفعه بعد که کاربر وارد صفحه می شود، یک پیام خوش آمد گویی دریافت می کند.

برای این برنامه ۳ تابع نیاز داریم:

یک تابع برای ایجاد و تنظیم کوکی
یک تابع برای دریافت کوکی
یک تابع برای چک کردن کوکی

تابع برای ایجاد و تنظیم کوکی

ابتدا تابعی می نویسیم که نام بازدید کننده را در یک متغیر کوکی ذخیره می کند:

مثال :

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 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)، مقدار کوکی (value) و تعداد روز هایی که کوکی باید بماند(exdays)

تابع برای گرفتن کوکی

تابعی می نویسیم که مقدار یک کوکی مشخص شده را بر گرداند:

مثال :

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

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

}

تابع برای بررسی کوکی

و در آخر تابعی ایجاد خواهیم کرد که بررسی می کند آیا کوکی تنظیم شده است یا خیر.

اگر کوکی ست شده باشد تابع یک تبریک نشان می دهد.

اگر کوکی ست نشده باشد تابع یک Promp box برای درخواست نام کاربر نمایش می دهد و کوکی username را به مدت ۳۶۵ روز توسز تایع ()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 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);

}

تمام کد به صورت یکجا:

مثال : تمام کدهای فوق به صورت یکجا

<br><!DOCTYPE html>
<html>
<head>
<script>

function setCookie(cname,cvalue,exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

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

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, 30);
       }
    }
}

</script>
</head>
<body onload="checkCookie()">
</body>
</html>

<html>

<head>

function setCookie(cname,cvalue,exdays) {

var d = new Date();

d.setTime(d.getTime() + (exdays*24*60*60*1000));

var expires = "expires=" + d.toGMTString();

document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";

}

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

}

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, 30);

}

</script>

</head>

</body>

</html>

خودتان امتحان کنید »

هنگامی که صفحه بارگذاری شود، تابع ()checkCookie اجرا خواهد شد.

جلسه کار با کوکی ها در جاوا اسکریپت JavaScript نیز به پایان رسید.
در جلسات آتی به آموزش Ajax در JavaScript خواهیم پرداخت. با ما همراه باشید

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 6

HamiD
تیر ۱۷, ۱۳۹۸
عالیه 🙂
پاسخ دادن
میثم امامی
شهریور ۹, ۱۳۹۸
سلام
برای سرور چند دستگاه صنعتی web gui نوشتم
اگه همزمان دو تا صفحه باز کنم که هر صفحه مختص یک دستگاه باشه با تغییر دادن اطلاعات در صفحه اول صفحه دوم هم تبدیل به صفحه اول میشه ؟!
با کوکی چه کنم ؟؟؟
پاسخ دادن
- صادق
  شهریور ۱۰, ۱۳۹۸
  سلام.
  منظورتون چه نوع اطلاعاتی هست؟
  با کوکی ها دقیقا چه کار می‌خواین بکنین؟
  پاسخ دادن
میثم امامی
شهریور ۱۳, ۱۳۹۸
کلا یک صفحه نوشته شده که با انتخاب دستگاه مورد نظر این صفحه به ای پی اون دستگاه متصل میشه و دیتای اون دستگاه و ریسپانس میکنه و مقادیر مثلا لول صدای اون دستگاه و نمایش میده ما میتونیم لول صدا رو تغییر بدیم .
تو حالت نرمال وقتی یک صفحه باز باشه مشکلی وجود نداره اما وقتی همزمان صفحات دو دستگاه رو باز میکنیم با مثلا تغییر لول صدای این صفحه ناگهان ای پی صفحه دوم هم به ای پی صفحه اول تغییر کرده و هر دو صفحه یک دستگاه رو نمایش میدن .
پاسخ دادن
- صادق
  شهریور ۱۳, ۱۳۹۸
  با عرض پوزش در این مورد اطلاعی ندارم.
  پاسخ دادن
احمد آقاجانپور
آذر ۶, ۱۴۰۰
سلام وقت بخیر سوالی داشتم این setTime در این قسمت d.setTime(d.getTime() + (exdays*24*60*60*1000)) نوشتین این چیزیه یعنی کلمه کلید‌ایه یه نه یک اسمی یا چیزی که خودتون اضافه کردین یا در جاوا اسکریپت هست مثلاً document.cookie توی جاوا اسکریپت هست خواستم بدونم اونم خودش وجود داره یا نه صرفاً یک اسمی که خودتون قرار دادین اگه هست منظورش چیه
پاسخ دادن

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۹۱ : کوکی ها در جاوا اسکریپت

کوکی ها (Cookies)

کوکی ها چیستند؟

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

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

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

حذف کوکی ها در جاوا اسکریپت

رشته کوکی ها

مثال ساخت کوکی در جاوا اسکریپت

تابع برای ایجاد و تنظیم کوکی

تابع برای گرفتن کوکی

تابع برای بررسی کوکی

لیست مطالب دوره

کار با فرم ها

اشیا

توابع

HTML DOM

BOM

AJAX

JSON

مقایسه ی جاوا اسکریپت با jQuery

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ