شنبه ۲۹ دي ۱۴۰۳
Tut24 آموزش برنامه نویسی و مجله تخصصی فناوری ورود/عضویت

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

کوکی‌ها چیستند؟

مرورگرها و سرورها از پروتکل HTTP برای ارتباط استفاده می‌کنند و HTTP یک پروتکل بی‌وضع (stateless) است. اما برای یک وب سایت تجاری، نگه‌داشتن اطلاعات session کاربران در صفحات مختلف الزامی است. به عنوان مثال، یک ثبت نام کاربر پس از تکمیل صفحات مختلف به پایان می‌رسد. اما چگونه اطلاعات session کاربران را در تمام صفحات وب نگه داری کنیم؟

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

چگونه کار می‌کند؟

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

کوکی‌ها یک رکورد داده‌ای متن ساده با ۵ فیلد متغیر طول هستند که شامل:

  • انقضا − تاریخی که کوکی منقضی خواهد شد. اگر این فیلد خالی باشد، کوکی هنگامی که بازدیدکننده مرورگر را بسته باشد، منقضی می‌شود.

  • دامنه − نام دامنه سایت شما.

  • مسیر − مسیر به دایرکتوری یا صفحه وب که کوکی را تنظیم کرده‌اید. این می‌تواند خالی باشد اگر می‌خواهید کوکی را از هر دایرکتوری یا صفحه دریافت کنید.

  • امن − اگر این فیلد شامل واژه "امن" باشد، کوکی تنها می‌تواند با یک سرور امن بازیابی شود. اگر این فیلد خالی باشد، هیچ محدودیتی وجود ندارد.

  • نام=مقدار − کوکی‌ها به صورت جفت کلید-مقدار تنظیم و بازیابی می‌شوند.

کوکی‌ها در ابتدا برای برنامه‌نویسی 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 Cookie" onclick = "WriteCookie();"/>
      </form>   
   </body>
</html>

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

خواندن کوکی‌ها

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

می‌توانید از تابع 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' را به یک تاریخ و زمان تنظیم کنید.

Example

تلاش کنید مثال زیر را انجام دهید. این نشان می‌دهد که چگونه می‌توانید زمان انقضای یک کوکی را به مدت یک ماه گسترش دهید.


<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 = "myform" action = "">
         Enter 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 = "myform" action = "">
         Enter name: <input type = "text" name = "customer"/>
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
      </form>      
   </body>
</html>