JavaScript:کوکی‌های جاوااسکریپت

از ویکی کد
پرش به ناوبری پرش به جستجو
دورهٔ آموزشی جاوااسکریپت
Javascript.jpg
HTML DOM
۱JavaScript:HTML DOM در جاوااسکریپت
۲JavaScript:متدهای HTML DOM در جاوااسکریپت
۳JavaScript:HTML DOM Document در جاوااسکریپت
۴JavaScript:عناصر HTML DOM در جاوااسکریپت
۵JavaScript:HTML DOM در جاوااسکریپت - تغییر محتوای HTML
۶JavaScript:DOM در جاوااسکریپت - تغییر CSS
۷JavaScript:انیمیشن در HTML DOM جاوااسکریپت
۸JavaScript:رویدادها در HTML DOM جاوااسکریپت
۹JavaScript:شنونده رویداد در HTML DOM جاوااسکریپت
۱۰JavaScript:پیمایش در HTML DOM جاوااسکریپت
۱۱JavaScript:عناصر (گره‌ها) HTML DOM در جاوااسکریپت
۱۲JavaScript:مجموعه‌های HTML DOM جاوااسکریپت
۱۳JavaScript:لیست گره‌ها در HTML DOM جاوااسکریپت
Browser BOM
۱JavaScript:پنجره جاوااسکریپت - مدل شیء مرورگر
۲JavaScript:پنجره صفحه نمایش در جاوااسکریپت
۳JavaScript:موقعیت پنجره در جاوااسکریپت
۴JavaScript:تاریخچه پنجره در جاوااسکریپت
۵JavaScript:ناوبری پنجره در جاوااسکریپت
۶JavaScript:جعبه پیغام جاوااسکریپت
۷JavaScript:رویدادهای زمان‌بندی شده در جاوااسکریپت
۸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";

با پارامتر مسیر (به انگلیسی: path)، شما می‌توانید به مرورگر بگویید که کوکی به کدام مسیر مربوط است، به صورت پیشفرض کوکی‌ها به صفحه جاری مربوط می‌شوند.

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;

     

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

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

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

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

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

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

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

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

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

مثال

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).

تابع با اضافه کردن نام کوکی، مقدار کوکی و مدت زمان انقضا یک کوکی می‌سازد.

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

سپس ما یکfunctionمی‌سازیم که مقدار یک کوکی به خصوص را برمی‌گرداند:

مثال

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

توضیح تابع:

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

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

رشته کوکی را decode (به فارسی: رمزگشایی) می‌کند تا کوکی‌های با کاراکتر مخصوص برای مثال ′$′ را مدیریت کند.

متغیر document.cookie را بر اساس نقطه ویرگول ; تقسیم کرده و نتیجه را درون یک آرایه با نام ca می‌ریزد. (ca = decodedCookie.split(';'))

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

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

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

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

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

اگر کوکی ساخته شده باشد، تابع پیغام خوش‌آمدگویی نمایش می‌دهد.

اگر کوکی ساخته نشده قباشد، این تابع یک جعبه اعلان نمایش خواهد داد که از کاربر نام او را دریافت می‌کند و نام کاربر را در قالب یک کوکی برای ۳۶۵ روز به وسیله فراخوانی متد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 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()را زمانی که صفحه بارگذاری شد اجرا می‌کند.

منابع آموزشی