آموزش اکما اسکریپت - کوکی ها (Cookies) در ECMAScript

مرورگرهای وب و سرورها از پروتکل http برای ارتباط با هم استفاده می کنند. Http یک پروتکل بدون حالت (stateless) است. به طور مثال، هنگامی که یک کلاینت چندین درخواست را ارسال می کند، این پروتکل داده های کلاینت ها را نگه داری نمی کند. برای تکمیل این چرخه درخواست- پاسخ بین کلاینت و سرور از یک مفهومی به نام Session استفاده می شود.

کوکی ها مکانیزم پیش فرضی است که مرورگرها از آن برای ذخیره داده های مرتبط با Session کاربران استفاده می کنند.

کوکی چطور کار می کند؟

سرور شما یک سری داده ها را به صورت کوکی برای مرورگر بازدیدکنندگان ارسال می کند. مرورگر ممکن است کوکی ها را قبول کند. اگر قبول کند آن را بصورت یک متن ساده در هارد بازدیدکنندگان ذخیره می کند.

حال، اگر بازدیدکننده به یک صفحه دیگر در وب سایت مراجعه کند، مرورگر همان کوکی را برای سرور به منظور بازیابی ارسال می کند. بعد از بازیابی سرور می فهمد چه چیزی را در کوکی ذخیره کرده بود.

کوکی ها رکوردهایی به صورت داده های متنی ساده ای هستند که از 5 قسمت تشکیل شده اند:

انقضاء: تاریخی که کوکی منقضی می شود. در صورتی که این پارامتر را خالی بگذارید، کوکی هنگامی منقضی می شود که بازدید کننده از مرورگر خارج شود.

آدرس دامنه: آدرس دامنه وب سایت

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

امنیت(Secure): در صورتی که کوکی شامل کلمه "secure" باشد، تنها از سرورهای امن بازیابی می شود، در صورتی که این فیلد را خالی بگذارید، این محدودیت به آن اعمال نمی شود.

نام= مقدار: کوکی به شکل جفت های کلید = مقدار ذخیره و بازیابی می شوند.

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

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

ذخیره کردن کوکی ها

ساده ترین روش برای ایجاد یک کوکی، نسبت دادن یک مقدار رشته ای به آبجکت document.cookie است. مانند زیر:

"document.cookie = "key1 = value1; key2 = value2; expires = date";

در اینجا خصیصه expires اختیاری است. در صورتی که این خصیصه را با یک تاریخ و زمان مجاز تنظیم کنید، کوکی در آن تاریخ و زمان منقضی می شود و پس از آن قبل دسترسی نیست.

نکته: مقادیر کوکی ها نباید شامل سمی کولن، کاما یا فضای خالی باشد. به این دلیل که ممکن است از تابع جاوا اسکریپت escape() برای برای رمزگذاری مقادیر، قبل از ذخیره کردن در کوکی استفاده شود. در صورتی که از این تابع استفاده کنید، برای خواندن مقادیر رمزشده، از تابع unescape() استفاده کنید. این تابع مقادیر رمز شده را رمزگشایی می کند و شما می توانید به راحتی به مقادیر کوکی دسترسی داشته باشید.

مثال:

<html> 
   <head> 
      <script type = "text/javascript">  
         function WriteCookie() {  
            if( document.myform.customer.value == "" ){  
               alert ("Enter some value!");  
               return;  
            }  
            cookievalue =  escape(document.myform.customer.value) + ";";  
            document.cookie = "name = " + cookievalue;  
            document.write ("Setting Cookies : " + "name = " + cookievalue );  
         }  
      </script> 
   </head> 
      
   <body> 
      <form name = "myform" action = ""> 
         Enter name: <input type = "text" name = "customer"/> 
         <input type = "button" value = "Set" onclick = "WriteCookie();"/> 
      </form> 
   </body> 
</html>

حالا سیستم شما یک کوکی به اسم name دارد. شما می توانید چندین کوکی را با استفاده از چند جفت کلید = مقدار ایجاد کنید و آنها را با کاما از هم جدا کنید.

خواندن کوکی

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

همچنین می توانید از متد split() برای جدا کردن کلید و مقدار از یک رشته استفاده کنید.

مثال:

<html> 
   <head> 
      <script type = "text/javascript"> 
         function ReadCookie() {  
            var allcookies  =  document.cookie;  
            document.write ("All Cookies : " + allcookies ); 
         } 
         // Get all the cookies pairs in an array  
         cookiearray = allcookies.split(';');  
         
         // Now take key value pair out of this array  
         for(var i = 0; i<cookiearray.length; i++) {  
            name  =  cookiearray[i].split('=')[0];  
            value = cookiearray[i].split('=')[1];  
            document.write ("Key is : " + name + " and Value is : " + value); 
         }  
      </script> 
   </head> 

   <body> 
      <form name = "myform" action = ""> 
         <p> click the following button and see the result:</p> 
         <input type = "button" value = "Get Cookie" onclick = "ReadCookie()"/> 
      </form> 
   </body> 
</html>

نکته: در اینجا length یک متد کلاس Array است که طول یک آرایه را بر می گرداند.

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

تنظیم تاریخ انقضا کوکی

شما می توانید طول عمر یک کوکی که در مرورگر ذخیره شده را با تنظیم تاریخ انقضا برای آن افزایش دهید و تاریخ انقضا را در کوکی ذخیره کنید. این کار با تنظیم خصیصه expires برای یک تاریخ و زمان دلخواه انجام می گیرد. مثال زیر نشان می دهد که چطور می توان تاریخ انقضا یک کوکی را یک ماه افزایش دهید.

مثال

<html> 
   <head> 
      <script type = "text/javascript"> 
         function WriteCookie() {  
            var now = new Date();  
            now.setMonth( now.getMonth() + 1 );  
            cookievalue = escape(document.myform.customer.value) + ";"  
            document.cookie = "name = " + cookievalue;  
            document.cookie = "expires = " + now.toUTCString() + ";"  
            document.write ("Setting Cookies : " + "name = " + cookievalue );  
         } 
      </script> 
   </head> 

   <body> 
      <form name = "formname" action = ""> 
         Enter Cookie Name: <input type = "text" name = "customer"/> 
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/> 
      </form> 
   </body> 
</html>

حذف یک کوکی

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

برای اینکار، شما باید تاریخ انقضا کوکی را یک تاریخ در گذشته تنظیم کنید. مثال زیر نشان می دهد که چطور یک کوکی را با تنظیم تاریخ انقضا برابر یک ماه قبل را حذف کرد.

مثال

<html> 
   <head> 
      <script type = "text/javascript"> 
         function WriteCookie() {  
            var now = new Date();  
            now.setMonth( now.getMonth() - 1 );  
            cookievalue = escape(document.myform.customer.value) + ";" 
            document.cookie = "name=" + cookievalue;  
            document.cookie = "expires = " + now.toUTCString() + ";"  
            document.write("Setting Cookies : " + "name = " + cookievalue );  
         }  
      </script> 
   </head> 

   <body> 
      <form name = "formname" action = ""> 
         Enter Cookie Name: <input type = "text" name = "customer"/> 
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/> 
      </form> 
   </body> 
</html>