٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

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

کوکی ها به شما امکان می دهند اطلاعات کاربر را در صفحات وب ذخیره کنید. کوکی ها چیست؟ کوکی ها داده هایی هستند که در فایل های متنی کوچک در رایانه شما ذخیره می شوند. وقتی یک سرور وب یک…

محمد یوسفی

29 جولای 2021

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


کوکی ها چیست؟

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

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

کوکی ها برای حل مسئله “نحوه به خاطر سپردن اطلاعات مربوط به کاربر” اختراع شده اند:

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

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

username = John Doe

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

اگر مرورگر شما پشتیبانی کوکی های محلی را خاموش کرده باشد ، هیچ یک از نمونه های زیر کار نمی کند.


با JavaScript کوکی ایجاد کنید

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

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

document.cookie = "username=John Doe";

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

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

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

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


با JavaScript کوکی بخوانید

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

let x = document.cookie;

document.cookieهمه کوکی ها را در یک رشته برمی گرداند مانند: cookie1 = value؛ cookie2 = مقدار ؛ کوکی 3 = مقدار ؛


با JavaScript کوکی را تغییر دهید

با استفاده از JavaScript ، می توانید کوکی را به همان روشی که ایجاد می کنید تغییر دهید:

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

کوکی قدیمی بازنویسی می شود.


کوکی را با JavaScript پاک کنید

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

هنگام حذف کوکی لازم نیست مقدار کوکی را تعیین کنید.

فقط پارامتر منقضی شده را روی تاریخ گذشته تنظیم کنید:

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

برای اطمینان از پاک کردن کوکی مناسب باید مسیر کوکی را تعیین کنید.

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


رشته کوکی

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

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

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

کوکی 1 = مقدار ؛ cookie2 = مقدار ؛

       

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


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

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

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

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

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

  1. تابعی برای تنظیم مقدار کوکی
  2. تابعی برای بدست آوردن مقدار کوکی
  3. تابعی برای بررسی مقدار کوکی

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

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

مثال

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

مثال توضیح داده شده:

پارامترهای عملکرد بالا نام کوکی (cname) ، مقدار کوکی (cvalue) و تعداد روزهای منقضی شدن کوکی (روزهای گذشته) است.

این تابع با جمع کردن نام کوکی ، مقدار کوکی و رشته منقضی ، کوکی را تنظیم می کند.


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

سپس ، a ایجاد می کنیم functionکه مقدار کوکی مشخص شده را برمی گرداند:

مثال

function getCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i <ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

عملکرد توضیح داد:

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

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

رشته کوکی را رمزگشایی کنید تا کوکی ها را با کاراکترهای خاص ، به عنوان مثال “$” اداره کنید

سند را تقسیم کنید. کوکی روی علامت های نقطه ویرگول را به آرایه ای به نام ca (ca = decodedCookie.split (‘؛’)) تقسیم کنید.

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

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

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


عملکردی برای بررسی کوکی

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

اگر کوکی تنظیم شود ، یک تبریک نشان می دهد.

اگر کوکی تنظیم نشده باشد ، یک جعبه سریع نمایش داده می شود ، نام کاربر را می پرسد و نام کاربری کوکی را برای 365 روز ذخیره می کند ، با فراخوانی setCookieعملکرد:

مثال

function checkCookie() {
  let 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 setCookie(cname, cvalue, exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  let expires = "expires="+d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  let name = cname + "=";
  let ca = document.cookie.split(';');
  for(let i = 0; i < ca.length; i++) {
    let 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() {
  let 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()عملکرد را هنگام بارگیری صفحه اجرا می کند.

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها