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

4 سال پیش

امتیاز دهید post

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

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

کوکی ها چیست؟

مرورگرها و سرورهای وب از پروتکل HTTP برای برقراری ارتباط استفاده می کنند و HTTP یک پروتکل بدون حالت است. اما برای یک وب سایت تجاری ، لازم است اطلاعات جلسه را در میان صفحات مختلف حفظ کنید. به عنوان مثال ، یک ثبت نام کاربر پس از تکمیل بسیاری از صفحات پایان می یابد. اما نحوه نگهداری اطلاعات جلسه کاربران در همه صفحات وب متفاوت است.

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

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

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

کوکی ها یک رکورد داده ساده متنی از 5 فیلد با طول متغیر هستند –

Expires – تاریخ انقضا کوکی. اگر این مورد خالی باشد، هنگامی که بازدید کننده از مرورگر خارج می شود، کوکی منقضی می شود.
Domain – نام دامنه سایت شما.
Path – مسیری به فهرست یا صفحه وب است که کوکی را تنظیم می کند. اگر می خواهید کوکی را از هر فهرست یا صفحه ای بازیابی کنید ، این ممکن است خالی باشد.
Secure – اگر این قسمت شامل کلمه “Secure” باشد ، کوکی فقط با یک سرور امن بازیابی می شود. اگر این قسمت خالی باشد ، محدودیتی وجود ندارد.
Name=Value – کوکی ها به صورت جفت کلید-مقدار تنظیم و بازیابی می شوند

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

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

ذخیره کوکی ها

ساده ترین راه برای ایجاد کوکی اختصاص دادن مقدار رشته به شی document.cookie است که به این شکل است.

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

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

در اینجا ویژگی منقضی شده اختیاری است. اگر این ویژگی را با تاریخ یا زمان معتبری ارائه دهید ، کوکی در تاریخ یا ساعت معینی منقضی می شود و پس از آن ، مقدار کوکی ها قابل دسترسی نخواهد بود.

توجه – مقادیر کوکی ممکن است شامل نقطه ویرگول ، ویرگول یا فضای سفید نباشد. به همین دلیل ، ممکن است بخواهید از تابع ()Escape جاوا اسکریپت برای رمزگذاری مقدار قبل از ذخیره آن در کوکی استفاده کنید. اگر این کار را انجام دهید ، هنگام خواندن مقدار کوکی ، مجبور خواهید بود از تابع ()unescape مربوطه نیز استفاده کنید.

مثال

موارد زیر را امتحان کنید. نام مشتری را در کوکی ورودی تنظیم می کند.

&lt;html&gt;
   &lt;head&gt;   
      &lt;script type = "text/javascript"&gt;
         &lt;!--
            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 );
            }
         //--&gt;
      &lt;/script&gt;      
   &lt;/head&gt;
   
   &lt;body&gt;      
      &lt;form name = "myform" action = ""&gt;
         Enter name: &lt;input type = "text" name = "customer"/&gt;
         &lt;input type = "button" value = "Set Cookie" onclick = "WriteCookie();"/&gt;
      &lt;/form&gt;   
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

<!--

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>

Enter name: <input type = "text" name = "customer"/>

</form>

</body>

</html>

اکنون دستگاه شما یک کوکی به اسم name دارد. می توانید چندین کوکی را با استفاده از چند key = value از هم جدا شده با کاما تنظیم کنید.

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

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

می توانید از تابع ()split رشته ها برای شکستن یک رشته به کلید و مقادیر به شرح زیر استفاده کنید –

مثال

برای بدست آوردن همه کوکی ها ، مثال زیر را امتحان کنید.

you can use this string whenever you want to access the cookie. The document.cookie string will keep a list of name=value pairs separated by semicolons, where name is the name of a cookie and value is its string value.

You can use strings' split() function to break a string into key and values as follows −

Example
Try the following example to get all the cookies.

Live Demo
&lt;html&gt;
   &lt;head&gt;   
      &lt;script type = "text/javascript"&gt;
         &lt;!--
            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&lt;cookiearray.length; i++) {
                  name = cookiearray[i].split('=')[0];
                  value = cookiearray[i].split('=')[1];
                  document.write ("Key is : " + name + " and Value is : " + value);
               }
            }
         //--&gt;
      &lt;/script&gt;      
   &lt;/head&gt;
   
   &lt;body&gt;     
      &lt;form name = "myform" action = ""&gt;
         &lt;p&gt; click the following button and see the result:&lt;/p&gt;
         &lt;input type = "button" value = "Get Cookie" onclick = "ReadCookie()"/&gt;
      &lt;/form&gt;      
   &lt;/body&gt;
&lt;/html&gt;

you can use this string whenever you want to access the cookie. The document.cookie string will keep a list of name=value pairs separated by semicolons, where name is the name of a cookie and value is its string value.

You can use strings' split() function to break a string into key and values as follows −

Example

Try the following example to get all the cookies.

Live Demo

<html>

<head>

<!--

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>

<p> click the following button and see the result:</p>

</form>

</body>

</html>

توجه – در اینجا length روشی از کلاس Array است که طول یک آرایه را برمی گرداند. ما در آرایه ها در یک فصل جداگانه بحث خواهیم کرد. در آن زمان ، لطفا سعی کنید آن را هضم کنید.

توجه – ممکن است کوکی های دیگری از قبل روی دستگاه شما تنظیم شده باشد. کد بالا تمام کوکی های تنظیم شده روی دستگاه شما را نمایش می دهد.

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

با تنظیم تاریخ انقضا و ذخیره تاریخ انقضا در کوکی، می توانید عمر یک کوکی را فراتر از جلسه فعلی مرورگر افزایش دهید. این کار را می توان با تنظیم ویژگی ‘expires’ به تاریخ و زمان انجام داد.

مثال

مثال زیر را امتحان کنید. این نشان می دهد که چگونه تاریخ انقضا یک کوکی را 1 ماه تمدید کنید.

&lt;html&gt;
   &lt;head&gt;   
      &lt;script type = "text/javascript"&gt;
         &lt;!--
            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 );
            }
         //--&gt;
      &lt;/script&gt;      
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;form name = "myform" action = ""&gt;
         Enter name: &lt;input type = "text" name = "customer"/&gt;
         &lt;input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/&gt;
      &lt;/form&gt;      
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

<!--

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>

Enter name: <input type = "text" name = "customer"/>

</form>

</body>

</html>

حذف کوکی

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

مثال

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

&lt;html&gt;
   &lt;head&gt;   
      &lt;script type = "text/javascript"&gt;
         &lt;!--
            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 );
            }
          //--&gt;
      &lt;/script&gt;      
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;form name = "myform" action = ""&gt;
         Enter name: &lt;input type = "text" name = "customer"/&gt;
         &lt;input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/&gt;
      &lt;/form&gt;      
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

<!--

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>

Enter name: <input type = "text" name = "customer"/>

</form>

</body>

</html>

منبع.

لیست جلسات قبل آموزش جاوا اسکریپت

امتیاز دهید post

نویسنده مطلب saber

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

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

کوکی ها چیست؟

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

ذخیره کوکی ها

مثال

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

مثال

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

مثال

حذف کوکی

مثال

لیست جلسات قبل آموزش جاوا اسکریپت

دیدگاه شما

بدون دیدگاه

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

کوکی ها چیست؟

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

ذخیره کوکی ها

مثال

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

مثال

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

مثال

حذف کوکی

مثال

لیست جلسات قبل آموزش جاوا اسکریپت

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه