آموزش جاوا اسکریپت

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

کوکی چیست؟

کوکی مرورگر (browser cookie) یه قسمت کوچکی از اطلاعات هست که مرورگر توی خودش ذخیره میکنه.
کوکی ها میتونن سرور ساید یا کلاینت ساید باشن، یعنی میتونن توسط سرور یا کلاینت به مرورگر فرستاده شده باشن.
مرورگر میتونه این اطلاعات رو ذخیره کنه و اگه ازش درخواست شد، به سرور ارسالش کنه.

از این قابلیت برای پیاده سازی فرم های ورودی، سبد های خرید، امتیاز بازی ها و هرچیزی که سرور نیاز به بخاطر سپردن داشته باشه استفاده میشه.

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

در جاوااسکریپت میتونیم کوکی هارو با پراپرتی document.cookie ایجاد کنیم، بخونیم و یا دیلیت کنیم.
اگه تفاوت پراپرتی ها و متغیر ها و انواع اون هارو در جاوااسکریپت نمیدونید حتما یه سر به مقاله ی انواع داده ها و متغیر ها در جاوا اسکریپت بزنید.

ایجاد و تغییر کوکی

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

document.cookie = "username=Asghar Farhadi";

قسمت پشت مساوی، اسم کوکی هست که میتونه هرچیزی باشه. هر کوکی اسمی مختص به خودش داره.
به کوکی ها با اون اسمشون دسترسی داریم، میتونیم بخونیمشون، دیلیتشون کنیم و یا تغییرشون بدیم.

قسمت جلوی مساوی، value یا مقدار کوکی هست. کوکی غیر از این قسمت میتونه دو قسمت دیگه هم داشته باشه.
دومین قسمت، expires یا تاریخ انقضای کوکیمون هست که مرورگر تا اون تاریخ، اطلاعات کوکی مارو نگه میداره.
این زمان، با تاریخ و ساعت سیستم کاربر چک میشه و با تایم زون GMT یا UTC یا همون ساعت جهانی هست.

document.cookie = "username=Asghar Farhadi; expires=Sa, 07 Nov 2020 00:00:00 GMT";

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

document.cookie = "username=Asghar Farhadi; expires=Sa, 07 Nov 2020 00:00:00 GMT; path=/";

تغییر کوکی هم درست مثل ایجادش هست. با استفاده از نام کوکیمون میتونیم اون رو تغییر بدیم.

document.cookie = "username=Mamad; expires=Tu, 29 Sep 2020 19:50:00 GMT" path=/;

دیلیت کوکی

دیلیت کوکی ها خیلی سادست، شما فقط باید تاریخ انقضای کوکی رو به یه تاریخی که منقضی شده تغییر بدید.
حتی نیاز به نوشتن مقدار کوکی هم ندارید

document.cookie = "username=; expires=Tu, 30 Sep 1980 00:00:00 GMT; path=/";

تفاوت document.cookie با استرینگ معمولی

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

var str = "username=Asghar";
console.log("1: " + str);
-> 1: username=Asghar
var str = "username2=Mamad";
console.log("2: " + str);
-> 2: username2=Mamad

در استرینگ معمولی با ریختن یه مقدار جدید درون متغیر، مقدار متغیر جای خودشو به مقدار جدید میده.

document.cookie = "username=Asghar";
console.log("1: " + document.cookie);
-> 1: username=Asghar
document.cookie = "username2=Mamad";
console.log("2: " + document.cookie);
-> 2: username=Asghar; username2=Mamad

ولی با اضافه کردن کوکی جدید، این کوکی هم به پراپرتی استرینگ document.cookie اضافه میشه.

یه مثال کوچیک برای کوکی در جاوااسکریپت

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

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

فانکشن setCookie

فانکشن اولی که میخوایم بنویسیم، فانکشن setCookie یا همون فانکشنیه که قابلیت ایجاد و تغییر رو بهمون میده.
برای این فانکشن سه تا پارامتر اسم کوکی، ولیوی کوکی و تعداد روز های انقضا تعریف میکنیم که موقع فراخوانی فانکشن باید مقداردهی بشن.

function setCookie(cName, cValue, cExpDays) {}

درون فانشکن، یک متغیر برای تاریخ تعریف میکنیم. این متغیر رو با Date Constructor برابر با تاریخ و ساعت همون لحظه سیستم قرار میدیم.

 var date = new Date();

یکی از توابعی که امروز باهاش کار داریم، getTime هست.
این فانکشن تعداد میلی ثانیه هایی که تاریخ متغیرمون از تاریخ 1 ژانویه 1970 گذشته رو برمیگردونه.
تابع بعدی setTime هست که تاریخ رو به صورت میلی ثانیه هایی که از 1 ژانویه 1970 گذشته میگیره و به صورت تاریخ و ساعت توی متغیرمون میریزه.

با استفاده از این دو تابع، روز های انقضا رو به علاوه ی تاریخ ثبت کوکی میکنیم.
دقت داشته باشید تابع به میلی ثانیه میگیره و ما تاریخمون به روز هست. پس باید تبدیل انجام بدیم.
برای تبدیل میلی ثانیه به ثانیه ضربدر 1000، ثانیه به دقیقه ضربدر 60، دقیقه به ساعت ضربدر 60 و ساعت به روز باید مقدارمون رو ضربدر 24 کنیم.
پس با متد setTime مقدار جدیدمون که getTime یا تایم الان سیستم به میلی ثانیه هست رو به علاوه ی روز هامون میکنیم.

date.setTime(date.getTime() + (cExpDays * 1000 * 60 * 60 * 24));

فرمتی تاریخی که document.cookie ازما میخواد UTC String هست که تاریخ و ساعت با تایم زون جهانی هست.
این فرمت رو میتونیم با تابع toUTCString بدست بیاریم.

در آخرم به صورت یه کوکی مینویسیمش و به document.cookie اضافش میکنیم.

document.cookie = cName + "=" + cValue + ";" + expire + ";path=/"

فانکشن کامل اینجوری هست:

function setCookie(cName, cValue, cExpDays) {
    var date = new Date();
    date.setTime(date.getTime() + (cExpDays * 1000 * 60 * 60 * 24));
    var expire = "expires=" + date.toUTCString();

    document.cookie = cName + "=" + cValue + ";" + expire + ";path=/"
}

ما با این فانکشن هم تغییر میتونیم ایجاد کنیم هم کوکی جدید میتونیم وارد کنیم؛ همینطور میتونیم با قرار دادن اکسپایر دیت کوکی به یه تاریخ منقضی شده اون رو دیلیت کنیم.

فانکشن getCookie

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

var ptrSearch = new RegExp("^" + cName + "=.*"),
        ptrValue = new RegExp("(?<=" + cName + "=).*");

برای جدا کردن هر کوکی، از متد split استفاده میکنیم.
این متد یه استرینگ رو بررسی میکنه و هرجا به رشته ی دومی که کاربر بهش داده میرسه از همونجا استرینگ رو جدا میکنه و به صورت آرایه برمیگردونه.

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

var documentCookies = document.cookie.split('; ');
    for (var i = 0; i < documentCookies.length; i++) {
        if (ptrSearch.test(documentCookies[i])) {
            return ptrValue.exec(documentCookies[i])[0],
        }
    }
    return "";

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

function getCookie(cName) {
    var ptrSearch = new RegExp("^" + cName + "=.*"),
        ptrValue = new RegExp("(?<=" + cName + "=).*");

    var documentCookies = document.cookie.split('; ');
    for (var i = 0; i < documentCookies.length; i++) {
        if (ptrSearch.test(documentCookies[i])) {
            return ptrValue.exec(documentCookies[i])[0];
        }
    }
    return "";
}

فانکشن checkCookie

فانکشن چک کوکی سادست. فقط یه پارامتر اسم میگیره و با یه ایف چک میکنه که آیا فانکشن گت کوکی با اون اسم مقدار خالی برمیگردونه یا نه.

function checkCookie(cName) {
    if (getCookie(cName) == "") {
        return false;
    } else {
        return true;
    }
}

فراخوانی فانکشن ها و گرفتن ورودی با prompt

در این مرحله میخوایم با prompt ها و confirm فانکشن هامون رو فراخونی کنیم.
میخوایم کدی بنویسیم که یوزرنیمی رو از کاربر بگیره و اون رو به صورت کوکی ذخیره کنه.
اول، باید چک بکنیم که آیا کوکی یوزرنیم وجود داره یا نه؛ که برای این کار از فانکشن چک کوکی که نوشتیم استفاده میکنیم.
اگه کوکی یوزرنیممون وجود داشت، اون رو با فانکشن alert به کاربر نشون میدیم.
اگه کوکی وجود نداشت، باید یوزرنیمی از کاربر بگیریم و اون رو با فانکشن setCookie تبدیل به یه کوکی کنیم.
برای اینکار میتونیم از prompt یا “input type=”text استفاده کنیم.
بسته به نوع کاربرد، میتونید از هردو استفاده کنید. ما در این قدم از prompt استفاده میکنیم.

if (checkCookie("username")) {
    alert(getCookie("username").value);
} else {
    setCookie("username", prompt("نام کاربری رو وارد کنید", 30);
}

میتونیم با استفاده از confirm و prompt و alert ها خیلی ساده یه محیط برای تست کوکی هامون بسازیم.
از کوکی ها و فانکشن هایی که نوشتیم میشه در فرم ها، سبد های خرید فروشگاه های اینترنتی و بازی های سمت کاربر استفاده کرد.
با استفاده از فانکشن confirm میتونیم یه مقدار صحیح یا غلط از کاربر بگیریم.
با استفاده از این فانکشن مقدار رو به کاربر نشون میدیم و ازش میپرسیم که میخواد مقدار رو تغییر بده یا حذف کنه یا نه.
اگه کاربر تغییر یا حذف رو انتخاب کرد، براش یه کانفریم دیگه مینویسیم که ازش بپرسه میخواد حذف کنه یا تغییر بده.

if (checkCookie("username")) {
    if(!confirm(getCookie("username")+"برای تغییر یا حذف نام کاربری، کنسل رو انتخاب کنید")){
if (confirm("Ok : تغییر \nCancel : حذف")) {
                setCookie("username", prompt("نام کاربری جدید را وارد کنید"), 30);
                alert(getCookie("username"));
            } else {
                setCookie("username", "", -30);
            }
}
} else {
    setCookie("username", prompt("نام کاربری رو وارد کنید", 30);
}

با این کد، زمانی که صفحه لود میشه، چک میشه که کوکی با اسم username سیو شده یا نه.
اگه بود اون رو چاپ میکنه و با confirm چند گزینه برای حذف یا تغییرش به کاربر میده.
اگه نبود یوزر نیم رو از کاربر میخواد.

حذف یا اضافه کردن کوکی جدید در Html

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

نوشتن و تعریف تگ های Html

ما به یه اینپوت با نوع تکست برای اضافه کردن کوکی، دوتا باتن برای حذف و اضافه کردن و یک تگ p برای نمایش کوکی داریم.
میتونیم این المنت هارو به دو قسمت تقسیم کنیم، قسمتی که وقتی کوکی وجود داره به نمایش در میاد و قسمتی که وقتی کوکی وجود نداره به نمایش در میاد.

<body&gt;

    <div id="aName"&gt;
        <input type="text" name="" id="inputName" placeholder="Name"&gt;
        <button id="btnAdd"&gt;Add Name</buttons&gt;
    </div&gt;

     <div id="dName"&gt;
         <p id="nameCookie"&gt;</p&gt;
         <button id="btnDlt"&gt;Delete Name</button&gt;
     </div&gt;
</body&gt;

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

در جاوااسکریپت نیاز به یه ایف داریم که چک کنه که کوکی وجود داره یا نه.
اگه کوکی اسم وجود داشته باشه دیسپلی “div id=”dName رو برابر با inline-block میکنیم و دیسپلی اون یکی div رو برابر با none میکنیم.
اگر وجود نداشته باشه برعکس همین کار رو انجام میدیم.
همینطور وقتی کوکی وجود نداره باید اون رو نمایش بدیم. برای اینکار از پراپرتی innerHTML تگ پیمون استفاده میکنیم.

if (!checkCookie("name")) {
    document.getElementById("aName").style.display = "inline-block";
    document.getElementById("dName").style.display = "none";
  
} else {
    document.getElementById("aName").style.display = "none";
    document.getElementById("dName").style.display = "inline-block";
    document.getElementById("nameCookie").innerHTML = "Your Name is " + getCookie("name").value;
    
}

حالا نیاز به دوتا ایونت کلیک برای باتن هامون داریم. وقتی کوکی وجود نداره دکمه دیلیت و وقتی وجود دکمه ادمون باید براش ایونت لیسنر تعریف بشه.
توی ایونت لیسنر دکمه دیلیت تاریخ کوکی رو به یه تاریخ اکسپایر شده تغییر میدیم تا حذف بشه.
بعد با تابع ()location.reload صفحه رو رفرش میکنیم.
توی ایونت لیسنر دکمه اد، یه شرط مینویسیم که مقدار تکست باکسمون که با تابع trim فاصله هاش حذف شده برابر با “” هست یا نه.
اگه نبود کوکیمون رو اضافه میکنیم و صفحه رو رفرش میکنیم.

if (!checkCookie("name")) {
    document.getElementById("aName").style.display = "inline-block";
    document.getElementById("dName").style.display = "none";
    document.getElementById("btnAdd").addEventListener("click", function() {
        if (!document.getElementById("inputName").value.trim() == "") {
            setCookie("name", document.getElementById("inputName").value, 30);
            location.reload();
        }

    });
} else {
    document.getElementById("aName").style.display = "none";
    document.getElementById("dName").style.display = "inline-block";
    document.getElementById("nameCookie").innerHTML = "Your Name is " + getCookie("name");
    document.getElementById("btnDlt").addEventListener("click", function() {
        setCookie("name", "", -30);
        location.reload();
    });
}

ایده ی مثال: W3schools
قسمت مقدمه ترجمه شده از: MDN

دیدگاهتان را بنویسید

دکمه بازگشت به بالا
بستن
بستن