کوکی ها در JavaScript
cookieها معمولاً برای تشخیص هویت کاربر، استفاده می شوند.
cookie چیست؟
cookie متغیری است که در کامپیوتر بازدیدکنند ذخیره می شود و هر زمان که مرورگرِ کامپیوتر مذکور، درخواستی را به سرور ارسال کند، cookie نیز ارسال خواهد شد. با JavaScript هم می توان cookieها را ایجاد و هم بازیابی کرد.
چند مثال از کاربرد cookieها:
- ذخیره نام در cookie: اولین باری که بازدیدکننده به صفحه وب شما مراجعه می کند، نامش را وارد می کند. نام کاربر در یک cookie ذخیره می شود. در دفعات بعدی مراجعه به صفحه مذکور، یک پیغام خوش آمدگویی شبیه: "آقا/خانم x به وب سایت Beyamooz خوش آمدید." دریافت می کند. (نام کاربر از cookie دریافت می شود)
- ذخیره تاریخ در cookie: اولین باری که بازدیدکننده به صفحه وب شما مراجعه می کند، تاریخ جاری در یک cookie ذخیره می شود. در دفعات بعدی مراجعه کاربر، تاریخ ذخیره شده در cookie بازیافت می شود و یک پیغام شبیه: "آخرین بازدید شما در تاریخ دوشنبه 21 اردیبهشت 1392 بوده است" نمایش داده می شود.
ایجاد و ذخیره یک cookie
در این مثال، یک cookie ایجاد خواهد شد و نام بازدیدکننده در آن ذخیره می شود.
در اولین باری که بازدیدکننده به صفحه وب شما مراجعه می کند، نام وی سوال می شود. نام بازدیدکننده در یک cookie ذخیره می شود و در دفعات بعدی که به صفحه وبِ مذکور مراجعه می کند، یک پیغام خوش آمدگویی دریافت خواهد کرد.
بنابراین ابتدا باید، یک تابع برای ذخیره نام بازدیدکننده ایجاد کنیم:
{
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;
}
پارامترهای ورودی تابع بالا:
- c_name: نام cookie
- value: مقدار cookie
- exdays: تعداد روز مانده تا منقضی شدن cookie
در تابع بالا، ابتدا برای بدست آوردن تاریخ انقضای cookie، پارامتر exdays را با تاریخ جاری جمع می کنیم و در متغیر exdate قرار می دهیم.
سپس نام cookie، مقدار cookie و تاریخ منقضی شدن cookie را در شیء document.cookie ذخیره می کنیم.
برگرداندن مقدار cookie
در ادامه برای برگرداندن مقدار cookie، تابع زیر را ایجاد می کنیم:
{
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
در نهایت، باید تابعی ایجاد نمایید که در صورت تنظیم cookie، یک پیغام خوش آمدگویی نمایش دهد و اگر cookie تنظیم نشده بود پنجره Prompt ظاهر شود و نام کاربر سوال شود و با صدا زدن تابع ()setCookie نام کاربر در cookie ذخیره شود.
{
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)
<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 اجرا می شود.
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 22987
دیدگاه‌ها
باسلام.من از تابعی که مقدار کوکی رو برمیگردونه چیزی نمیفهمم همینطور بقیه توابع بعد از اون . باید چیکار کنم؟میشه توضیحات دقیق تر و گویاتری رو اضافه کنید؟متشکرم
با سلام و تشکر
در بحث کوکی ها برای انقضای مدت چطور میتوان به کاربر اجازه داد از میان چند روز معین یکی را برای مدت انقضا انتخاب کند.ممنون
سلام، کد زیر را امتحان کنید:
<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" ایجاد خواهد شد. همچنین زمان انقضای کوکی نیز توسط کاربر تعیین خواهد شد.
سلام
این کوکی با کوکی هایی که در سمت سرور مثل پی اچ پی نوشته میشه فرق داره؟
و با هم تداخل ندارند اکه از هر دوتا استفاده بشه
سلام
کوکی هیچ موقع سمت سرور ایجاد نمی شه ...! در واقع محل نگهداری کوکی ها، سمت کاربر است و چه با JavaScript و چه با PHP کوکی بسازید نتیجه یکسان خواهد بود یعنی محل قرار گیری کوکی کامپیوتر کاربر است.
سلام
من عینا کد مثال بالارو کپی کردم ، اما هنگام اجرا کوکی را نگهداری نمی کند و هر بار با رفرش کردن صفحه مجددا
اسم را می پرسد.
میشه لطفا راهنمایی ام کنین.
سلام
برای اطمینان از ایجاد شدن کوکی مراحل زیر را انجام دهید:
1- در مرورگر فایرفاکس روی صفحه راست کلیک کنید و گزینه View Page Info را انتخاب کنید.
2- در پنجره باز شده روی تب Security کلیک کنید.
3- حالا روی دکمه View Cookie کلیک کنید.
در قسمت آخر چک کنید که در لیست نمایش داده شده، کوکی مورد نظر شما وجود داشته باشد. اگر وجود نداشت، مطئنا در کد مربوط به ایجاد کوکی مشکلی وجود دارد.
ممنون از پاسختون
تنها با chrome این مشکل رو داره! وقتی با firefox یا IE اجراش میکنم ، کوکی رو ذخیره میکنه.
سلام مجدد
زمانی که پروژه شما روی کامپوتر شخصی تون قرار دارد، مرورگر کروم مجوز ایجاد کوکی را نمی دهد، اما اگر همان پروژه را روی اینترنت قرار دهید مشکل ایجاد کوکی ها در مرورگر کروم بصورت اتوماتیک حل خواهد شد.
اما برای ایجاد کوکی برای زمانی که پروژه شما روی کامپیوتر شخصی تان قرار دارد می توانید مراحل زیر را طی کنید: (کلک زدن به مرورگر کروم)
1- پروژه تان را در آدرس C:\inetpub\wwwr oot\yourProject Folder قرار دهید.
2- با راست کلیک کردن روی My Computer و انتخاب Properties، در صفحه باز شده Computer name را بدست آورید.
3- حالا برای باز کردن پروژه تان در مرورگر کروم بصورت زیر عمل کنید:
http://my-computer-name/yourProjectFolder/index.html
با سلام
اگر من بخواهم کل اطلاعات وارد شده در داخل یک سایت یعنی تمام اطلاعات سایت زمانی که آن شخص مجددا وارد سایت شد همان اطلاعات وارد شده خودش را نشان دهد باید چگونه اینکار رو انجام دهم؟
مثل سایت http://invoiceto.me
ممنون
سلام
مشخصاً یکی از روش ها، استفاده از Cookie است، حالا که کاملاً با مفهوم Cookie آشنا شده اید، با استفاده از PHP مقادیر فیلدهای مورد را سمت سرور دریافت می کنید و سپس هم نام با هر کدام از فیلدها یک کوکی ایجاد می کنید. مسلماً برای بار دوم که کاربر آدرس سایت را وارد می کند و Enter می کند، تمام کوکی ها به سرور ارسال خواهد شد، حالا نوبت شماست که مقادیر کوکی ها را گرفته و تصمیم بگیرید که با اونها چی کار کنید.
برای کسب اطلاعات بیشتر در مورد نحوه ساخت Cookie و مقدار دهی آن در PHP به لینک زیر مراجعه فرمایید:
www.beyamooz.com/php/81-advance/78-cookie-%D9%87%D8%A7-%D8%AF%D8%B1-php
می خواستم مطمئن بشم که درست فهمیدم :
1: کوکی در هیستوری مرورگر ذخیره میشه؟
2: با مثالی که زدین یعنی تا یک سال دیگه با توجه به عدد 365 ی که وارد کردین اگر من لینک اون مثال رو باز کنم باز هم مقدار وارد شده در فیلد رو به من نشون میده؟
1- در مرورگر Internet Explorer کوکی ها در یک پوشه خاص نگهداری می شوند و به ازای هر کوکی یک فایل با فرمت txt. وجود دارد. با توجه به نسخه ویندوزتان محل پوشه مذکور متفاوت است.
مثلا برای Windows 7 یا Windows Vista برای دسترسی به کوکی ها به آدرس زیر برید:C:\Users\\AppData\Roaming\Microsoft\Windows\Cookies\
C:\Users\\AppData\Roaming\Microsoft\Windows\Cookies\Low
در مورد قسمت دوم سوالتون، بله تا زمانی که ویندوزتان را عوض نکنید و یا مرورگرتان را Unistall نکنید، به کوکی های ایجاد شده دسترسی خواهیم داشت.
سلام وممنون از خدمات سایتتون
میخواستم اگر امکانش هست توسط پلاگین کوکی یک کوکی برای این کد تعریف کنید تا عمل مخفی و آشکار شدن را ذخیره کند
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 درچندجای صفحه ازش استفاده کنم
بسیار بسیار س\اسگذارخواهم بود
با توجه به آموزش بالا باید از تابع زیر در کدتان استفاده کنید: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";
}
}
}
سلام و تشکر فراوان از راهنماییتان
اگرامکانش هست کدبالاراکامل انجامش بهید تا متوجه بشم
یعنی من کلا با کوکی ازوقتی باهاش آشنا شدم مشکل دارم یعنی نمیفهمم
اصلا درکش نمیکنم
خواهشا اگر انجامش بدید شرافتا هزارتا صلوات برا تون میفرستم به مولاعلی
به مثال "خودتان امتحان کنید" زیر مراجعه فرمایید:
beyamooz.com/try_it_yourself/tryit.php?filename=tryjs_cookie_display_status
سلام ذخیره نمیشه لطفا اگر میشه دوباره بررسی کنید بینهایت ممنون میشوم
ضمنا پیغامها رو که میده
your element :show/hid
میخوام نباشه راستی پلاگین کوکی جی کوئری روهم به صفحه معرفی کردم ولی ذخیره نمیشه
شرافتا هزارتا صلوات برا تون میفرستم
مقدار کوکی ها بدرستی ذخیره می شه، توجه فرمایید:
نام کوکی: script و مقدار ذخیره شده: show/hiden است.
جهت بررسی ذخیره شدن صحیح کوکی در مرورگر بصورت زیر عمل فرمایید:
1- اگر از مرورگر FirFox استفاده می کنید روی لینک show/Hide در مثال 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 تغییراتی را اعمال فرمایید.
سلام بسیار بسیار ممنون از زحمتی که کشیدید
ولی من برنامه ای بصورت جی کوئری طراحی کردم ومیخوام این عمل داخل برنامه بصورت مستقل اجرا بشه یعنی وقتی خروجی apk گرفتم داخل گوشی موبایل اجرا بشه نه مرورگر
اگرمقدور هست راهنمایی کنید ممنون میشم
مممنون می شم اگر سوالتون را در قسمت "آموزش برنامه نویسی اندروید" مطرح فرمایید.
ضمن سلام وخسته نباشید وتشکر فراوان ازراهنمایی خوبتان
من برای ذخیره 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