سبد خرید (0)

کوکی ها در JavaScript

cookieها معمولاً برای تشخیص هویت کاربر، استفاده می شوند.


cookie چیست؟ 

Wiki

cookie متغیری است که در کامپیوتر بازدیدکنند ذخیره می شود و هر زمان که مرورگرِ کامپیوتر مذکور، درخواستی را به سرور ارسال کند، cookie نیز ارسال خواهد شد. با JavaScript هم می توان cookieها را ایجاد و هم بازیابی کرد.

چند مثال از کاربرد cookieها:

  • ذخیره نام در cookie: اولین باری که بازدیدکننده به صفحه وب شما مراجعه می کند، نامش را وارد می کند. نام کاربر در یک cookie ذخیره می شود. در دفعات بعدی مراجعه به صفحه مذکور، یک پیغام خوش آمدگویی شبیه: "آقا/خانم x به وب سایت Beyamooz خوش آمدید." دریافت می کند. (نام کاربر از cookie دریافت می شود)
  • ذخیره تاریخ در cookie: اولین باری که بازدیدکننده به صفحه وب شما مراجعه می کند، تاریخ جاری در یک cookie ذخیره می شود. در دفعات بعدی مراجعه کاربر، تاریخ ذخیره شده در cookie بازیافت می شود و یک پیغام شبیه: "آخرین بازدید شما در تاریخ دوشنبه 21 اردیبهشت 1392 بوده است" نمایش داده می شود.

ایجاد و ذخیره یک cookie

Wiki

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

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

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

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

پارامترهای ورودی تابع بالا:

  1. c_name: نام cookie
  2. value: مقدار cookie
  3. exdays: تعداد روز مانده تا منقضی شدن cookie

در تابع بالا، ابتدا برای بدست آوردن تاریخ انقضای cookie، پارامتر exdays را با تاریخ جاری جمع می کنیم و در متغیر exdate قرار می دهیم.

سپس نام cookie، مقدار cookie و تاریخ منقضی شدن cookie را در شیء document.cookie ذخیره می کنیم.


برگرداندن مقدار cookie

Wiki

در ادامه برای برگرداندن مقدار cookie، تابع زیر را ایجاد می کنیم:

function getCookie(c_name)
{
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1)
  {
  c_start = c_value.indexOf(c_name + "=");
  }
if (c_start == -1)
  {
  c_value = null;
  }
else
  {
  c_start = c_value.indexOf("=", c_start) + 1;
  var c_end = c_value.indexOf(";", c_start);
    if (c_end == -1)
    {
    c_end = c_value.length;
    }
  c_value = unescape(c_value.substring(c_start,c_end));
  }
return c_value;
}

در کد بالا، با استفاده از متد ()indexOf داخل رشته cookie، نام cookie مورد نظر را جستجو می کنیم. (c_name: نام cookie)

در متد ()indexof اولی، اگر مقدار ("=" + c_name + " ") در رشته cookie یافت نشد، در متد ()indexof داخل if مقدار ("=" + c_name) جستجو می شود (بدون " ") بدین تریب در نهایت مکان شروعِ نام cookie در متغیر c_start ذخیره می شود.

در ادامه، در صورتی که مقدار متغیر c_start مخالف "1-" باشد، محل شروع و پایان مقدار cookie را بدست می آوریم و با استفاده از متد ()substring آنرا برمی گردانیم.


چک کردن مقدار cookie

Wiki

در نهایت، باید تابعی ایجاد نمایید که در صورت تنظیم cookie، یک پیغام خوش آمدگویی نمایش دهد و اگر cookie تنظیم نشده بود پنجره Prompt ظاهر شود و نام کاربر سوال شود و با صدا زدن تابع ()setCookie نام کاربر در cookie ذخیره شود.

function checkCookie()
{
var username=getCookie("username");
  if (username!=null && username!="")
  {
  alert("Welcome again " + username);
  }
else
  {
  username=prompt("Please enter your name:","");
  if (username!=null && username!="")
    {
    setCookie("username",username,365);
    }
  }
}

همه توابع بالا در یک مثال:

مثال (کوکی ها در JavaScript)

<!DOCTYPE html>
<html>
<head>
<script>
function getCookie(c_name)
{
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1)
{
c_start = c_value.indexOf(c_name + "=");
}
if (c_start == -1)
{
c_value = null;
}
else
{
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1)
{
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start,c_end));
}
return c_value;
}

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

function checkCookie()
{
var username=getCookie("username");
if (username!=null && username!="")
  {
  alert("Welcome again " + username);
  }
else
  {
  username=prompt("Please enter your name:","");
  if (username!=null && username!="")
    {
    setCookie("username",username,365);
    }
  }
}
</script>
</head>
<body onload="checkCookie()">
</body>
</html>
خودتان امتحان کنید »

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

دیدگاه‌ها  

+2 # علیرضاباهوش 1395-11-06 20:57
با سلام و تشکر
در بحث کوکی ها برای انقضای مدت چطور میتوان به کاربر اجازه داد از میان چند روز معین یکی را برای مدت انقضا انتخاب کند.ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # امیر پهلوان صادق 1395-11-07 09:24
سلام، کد زیر را امتحان کنید:
<head>
<script>
function SETcookie(c_nam e,value,exdays) {
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape( value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
</script>
</head>

<body>
<select id="myList" onChange="SETco okie('beyamooz' ,'Cookie',this. selectedIndex)" >
<option value="1">1 day</option& gt;
<option value="2">2 day</option& gt;
<option value="3">3 day</option& gt;
<option value="4">4 day</option& gt;
</select>
</body>

در کد بالا، زمانی که مقدار دراپ دان لیست، توسط کاربر تغییر میکند، یک کوکی با نام "beyamooz" و مقدار "Cookie" ایجاد خواهد شد. همچنین زمان انقضای کوکی نیز توسط کاربر تعیین خواهد شد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # mostafa tayebi 1395-06-19 15:01
سلام
این کوکی با کوکی هایی که در سمت سرور مثل پی اچ پی نوشته میشه فرق داره؟
و با هم تداخل ندارند اکه از هر دوتا استفاده بشه
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1395-06-20 14:02
سلام
کوکی هیچ موقع سمت سرور ایجاد نمی شه ...! در واقع محل نگهداری کوکی ها، سمت کاربر است و چه با JavaScript و چه با PHP کوکی بسازید نتیجه یکسان خواهد بود یعنی محل قرار گیری کوکی کامپیوتر کاربر است.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # ملیکا یزدانی 1395-03-24 17:27
سلام
من عینا کد مثال بالارو کپی کردم ، اما هنگام اجرا کوکی را نگهداری نمی کند و هر بار با رفرش کردن صفحه مجددا
اسم را می پرسد.
میشه لطفا راهنمایی ام کنین.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1395-03-25 08:49
سلام
برای اطمینان از ایجاد شدن کوکی مراحل زیر را انجام دهید:
1- در مرورگر فایرفاکس روی صفحه راست کلیک کنید و گزینه View Page Info را انتخاب کنید.
2- در پنجره باز شده روی تب Security کلیک کنید.
3- حالا روی دکمه View Cookie کلیک کنید.
در قسمت آخر چک کنید که در لیست نمایش داده شده، کوکی مورد نظر شما وجود داشته باشد. اگر وجود نداشت، مطئنا در کد مربوط به ایجاد کوکی مشکلی وجود دارد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # ملیکا یزدانی 1395-03-25 16:24
ممنون از پاسختون
تنها با chrome این مشکل رو داره! وقتی با firefox یا IE اجراش میکنم ، کوکی رو ذخیره میکنه.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1395-03-26 14:18
سلام مجدد
زمانی که پروژه شما روی کامپوتر شخصی تون قرار دارد، مرورگر کروم مجوز ایجاد کوکی را نمی دهد، اما اگر همان پروژه را روی اینترنت قرار دهید مشکل ایجاد کوکی ها در مرورگر کروم بصورت اتوماتیک حل خواهد شد.
اما برای ایجاد کوکی برای زمانی که پروژه شما روی کامپیوتر شخصی تان قرار دارد می توانید مراحل زیر را طی کنید: (کلک زدن به مرورگر کروم)

1- پروژه تان را در آدرس C:\inetpub\wwwr oot\yourProject Folder قرار دهید.
2- با راست کلیک کردن روی My Computer و انتخاب Properties، در صفحه باز شده Computer name را بدست آورید.
3- حالا برای باز کردن پروژه تان در مرورگر کروم بصورت زیر عمل کنید:
http://my-computer-name/yourProjectFolder/index.html
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # مصطفی علیپور 1394-03-01 18:31
با سلام
اگر من بخواهم کل اطلاعات وارد شده در داخل یک سایت یعنی تمام اطلاعات سایت زمانی که آن شخص مجددا وارد سایت شد همان اطلاعات وارد شده خودش را نشان دهد باید چگونه اینکار رو انجام دهم؟
مثل سایت http://invoiceto.me
ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1394-03-03 22:37
سلام
مشخصاً یکی از روش ها، استفاده از Cookie است، حالا که کاملاً با مفهوم Cookie آشنا شده اید، با استفاده از PHP مقادیر فیلدهای مورد را سمت سرور دریافت می کنید و سپس هم نام با هر کدام از فیلدها یک کوکی ایجاد می کنید. مسلماً برای بار دوم که کاربر آدرس سایت را وارد می کند و Enter می کند، تمام کوکی ها به سرور ارسال خواهد شد، حالا نوبت شماست که مقادیر کوکی ها را گرفته و تصمیم بگیرید که با اونها چی کار کنید.
برای کسب اطلاعات بیشتر در مورد نحوه ساخت Cookie و مقدار دهی آن در PHP به لینک زیر مراجعه فرمایید:
www.beyamooz.com/php/81-advance/78-cookie-%D9%87%D8%A7-%D8%AF%D8%B1-php
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # webnoos.com 1394-02-21 18:32
می خواستم مطمئن بشم که درست فهمیدم :
1: کوکی در هیستوری مرورگر ذخیره میشه؟
2: با مثالی که زدین یعنی تا یک سال دیگه با توجه به عدد 365 ی که وارد کردین اگر من لینک اون مثال رو باز کنم باز هم مقدار وارد شده در فیلد رو به من نشون میده؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1394-02-21 18:53
1- در مرورگر Internet Explorer کوکی ها در یک پوشه خاص نگهداری می شوند و به ازای هر کوکی یک فایل با فرمت txt. وجود دارد. با توجه به نسخه ویندوزتان محل پوشه مذکور متفاوت است.
مثلا برای Windows 7 یا Windows Vista برای دسترسی به کوکی ها به آدرس زیر برید:C:\Users\\AppData\Roaming\Microsoft\Windows\Cookies\
C:\Users\\AppData\Roaming\Microsoft\Windows\Cookies\Low

در مورد قسمت دوم سوالتون، بله تا زمانی که ویندوزتان را عوض نکنید و یا مرورگرتان را Unistall نکنید، به کوکی های ایجاد شده دسترسی خواهیم داشت.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # khatat 1394-01-21 22:36
سلام وممنون از خدمات سایتتون
میخواستم اگر امکانش هست توسط پلاگین کوکی یک کوکی برای این کد تعریف کنید تا عمل مخفی و آشکار شدن را ذخیره کند
function showhide(id){
if (document.getEl ementById){
obj = document.getEle mentById(id);
if (obj.style.disp lay == "none"){
obj.style.displ ay = "";
} else {
obj.style.displ ay = "none";
}
}
}

div style="display: none;" id="script"
این قسمت، مخفی و آشکار می شود


a href="#" onclick="showhi de('script'); return(false);"نمایش/مخفی

ضمنا میخوام توسط آیدی (script)بصورت 1 و 2 و 3 درچندجای صفحه ازش استفاده کنم
بسیار بسیار س\اسگذارخواهم بود
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1394-01-22 16:47
با توجه به آموزش بالا باید از تابع زیر در کدتان استفاده کنید:function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape( value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}


function showhide(id){
if (document.getEl ementById){
obj = document.getEle mentById(id);
if (obj.style.disp lay == "none"){
setCookie(c_name,value,exdays)
obj.style.displ ay = "";
} else {
setCookie(c_name,value,exdays)
obj.style.displ ay = "none";
}
}
}
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # khatat 1394-01-22 17:08
سلام و تشکر فراوان از راهنماییتان
اگرامکانش هست کدبالاراکامل انجامش بهید تا متوجه بشم
یعنی من کلا با کوکی ازوقتی باهاش آشنا شدم مشکل دارم یعنی نمیفهمم
اصلا درکش نمیکنم
خواهشا اگر انجامش بدید شرافتا هزارتا صلوات برا تون میفرستم به مولاعلی
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1394-01-22 17:51
به مثال "خودتان امتحان کنید" زیر مراجعه فرمایید:
http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjs_cookie_display_status
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # khatat 1394-01-22 18:31
سلام ذخیره نمیشه لطفا اگر میشه دوباره بررسی کنید بینهایت ممنون میشوم
ضمنا پیغامها رو که میده
your element :show/hid
میخوام نباشه راستی پلاگین کوکی جی کوئری روهم به صفحه معرفی کردم ولی ذخیره نمیشه


شرافتا هزارتا صلوات برا تون میفرستم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1394-01-22 18:54
مقدار کوکی ها بدرستی ذخیره می شه، توجه فرمایید:
نام کوکی: script و مقدار ذخیره شده: show/hiden است.
جهت بررسی ذخیره شدن صحیح کوکی در مرورگر بصورت زیر عمل فرمایید:
1- اگر از مرورگر FirFox استفاده می کنید روی لینک show/Hide در مثال http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjs_cookie_display_status کلیک فرمایید.
2- راست کلیک در جایی از پنجره مرورگر FireFox
3- انتخاب گزینه View Page Info
4- در پنجره باز شده روی تب Security کلیک کنید.
5- روی دکمه View Cookies کلیک فرمایید.
6- در پنجره باز شده لیست تمام کوکی هایی که بوسیله سایت beyamooz.com ایجاد شده را مشاهده خواهید کرد، که یکی از آنها کوکی مورد نظر ما یعنی script است.
برای نزدیک شدن این مثال به نیازهایتان مسلماً باید آنرا تغیر دهید، بعنوان مثال برای تغییر و یا حذف پیغام your element :show/hid باید داخل تابع checkCookie تغییراتی را اعمال فرمایید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # khatat 1394-01-22 20:25
سلام بسیار بسیار ممنون از زحمتی که کشیدید
ولی من برنامه ای بصورت جی کوئری طراحی کردم ومیخوام این عمل داخل برنامه بصورت مستقل اجرا بشه یعنی وقتی خروجی apk گرفتم داخل گوشی موبایل اجرا بشه نه مرورگر
اگرمقدور هست راهنمایی کنید ممنون میشم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1394-01-23 08:05
مممنون می شم اگر سوالتون را در قسمت "آموزش برنامه نویسی اندروید" مطرح فرمایید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # khatat 1394-01-30 19:57
ضمن سلام وخسته نباشید وتشکر فراوان ازراهنمایی خوبتان
من برای ذخیره show/hide یک div با استفاده از راهنمایی های خوبی که کردید توانستم با کد زیر آنرا انجام دهم:
function setCookie(cname , cvalue, exdays) {
var d = new Date();
d.setTime(d.get Time() + (exdays*24*60*6 0*1000));
var expires = "expires="+d.to UTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname ) {
var name = cname + "=";
var ca = document.cookie .split(';');
for(var i=0; i
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی JavaScript

بستن
مدرس:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!