کوکی ها در JavaScript

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

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

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

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

کوکی ها برای حل مشکل "چگونه اطلاعات در مورد کاربر را به یاد داشته باشید " اختراع شد:

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

کوکی ها در  مقدار نام مانند:

username = John Doe

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

نکته: اگر مرورگر شما کوکی های محلی را خاموش نگه دارد هیچکدام از مثال های زیر کار نمی کنند

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

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

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

document.cookie = "username=John Doe";

شما همچنین می توانید یک تاریخ انقضا (در زمان UTC) اضافه کنید. به طور پیشفرض، کوکی هنگامی که مرورگر بسته است حذف می شود:

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

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

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

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

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

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

کوکی قدیمی رونویسی شده است.

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

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

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

شما باید مسیر کوکی را تعریف کنید تا اطمینان حاصل شود کوکی مناسب شما را حذف کنید.

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

رشته کوکی

ویژگی document.cookie به نظر می رسد یک رشته متنی طبیعی است. اما اینطور نیست

حتی اگر شما یک رشته کوکی کامل را برای document.cookie بنویسید، زمانی که آن را دوباره خواندید، فقط می توانید نام و مقدار آن را ببینید.

اگر کوکی جدیدی را تنظیم کنید، کوکی های قدیمی تر رونویسی نمی شوند. کوکی جدید به document.cookie اضافه شده است، بنابراین اگر شما دوباره document.cookie را بخوانید، چیزی شبیه به آن پیدا خواهید کرد:

cookie1 = value; cookie2 = value;

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

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

در مثال زیر، ما یک کوکی ایجاد می کنیم که نام بازدید کننده را ذخیره می کند.

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

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

برای مثال ما 3 توابع جاوا اسکریپتی ایجاد خواهیم کرد:

  • یک تابع برای تنظیم مقدار کوکی
  • یک تابع برای دریافت مقدار کوکی
  • یک تابع برای بررسی مقدار کوکی

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

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

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

عملکردهای کوکی را با اضافه کردن مقدار cookie، مقدار کوکی و پایان رشته را تنظیم می کند.

یک عملکرد برای دریافت کوکی

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

function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; 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 "";
}

تشریح مثال:

نام کوکی را به عنوان پارامتر (cname) بیاورید.

ایجاد یک متغیر (نام) با متن برای جستجو (cname + "=").

رشته کوکی را Decode کنید تا کوکی ها را با کاراکترهای خاص اداره کنید، برای مثال '$'

تقسیم document.cookie در semicolons به آرایه به نام ca (ca = decodedCookie.split ('؛')).

حلقه را از طریق آرایه ca (i = 0؛ i <ca.length؛ i ++) و هر مقدار c = ca [i] را بخوانید.

اگر کوکی یافت می شود (c.indexOf (name) == 0)، مقدار کوکی (c.substring (name.length، c.length) را نشان می دهد.

اگر کوکی پیدا نشود، "" را برگردانید.

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

آخر، ما تابع ایجاد می کنیم که کوکی را تعیین می کند.
اگر کوکی تنظیم شود، یک تبریک نمایش داده خواهد شد.
اگر کوکی تنظیم نشده باشد، یک کادر فوری نمایش داده می شود، درخواست نام کاربری را می دهد و کوکی نام کاربری را برای 365 روز ذخیره می کند، با تماس با عملکرد 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);
}
}
}

همه مثال ها در یکجا

مثال کامل کوکی(cookies)
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 getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.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, 365);
        }
    }
} 
مشاهده مثال

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

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری JavaScript

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط