JavaScript และคุกกี้

คุกกี้คืออะไร?

เว็บเบราว์เซอร์และเซิร์ฟเวอร์ใช้โปรโตคอล HTTP ในการสื่อสารและ HTTP เป็นโปรโตคอลไร้รัฐ แต่สำหรับเว็บไซต์เชิงพาณิชย์จำเป็นต้องรักษาข้อมูลเซสชันระหว่างหน้าต่างๆ ตัวอย่างเช่นการลงทะเบียนผู้ใช้หนึ่งคนจะสิ้นสุดลงหลังจากเสร็จสิ้นหลายหน้า แต่จะรักษาข้อมูลเซสชันของผู้ใช้ในหน้าเว็บทั้งหมดได้อย่างไร

ในหลาย ๆ สถานการณ์การใช้คุกกี้เป็นวิธีที่มีประสิทธิภาพที่สุดในการจดจำและติดตามการตั้งค่าการซื้อค่าคอมมิชชั่นและข้อมูลอื่น ๆ ที่จำเป็นสำหรับประสบการณ์ของผู้เยี่ยมชมหรือสถิติไซต์ที่ดีขึ้น

มันทำงานอย่างไร ?

เซิร์ฟเวอร์ของคุณส่งข้อมูลบางส่วนไปยังเบราว์เซอร์ของผู้เยี่ยมชมในรูปแบบของคุกกี้ เบราว์เซอร์อาจยอมรับคุกกี้ หากเป็นเช่นนั้นระบบจะจัดเก็บเป็นบันทึกข้อความธรรมดาในฮาร์ดไดรฟ์ของผู้เยี่ยมชม ตอนนี้เมื่อผู้เยี่ยมชมมาถึงหน้าอื่นบนไซต์ของคุณเบราว์เซอร์จะส่งคุกกี้เดียวกันไปยังเซิร์ฟเวอร์เพื่อเรียกค้น เมื่อดึงข้อมูลเซิร์ฟเวอร์ของคุณจะรู้ / จำสิ่งที่เก็บไว้ก่อนหน้านี้

คุกกี้คือบันทึกข้อมูลข้อความธรรมดาของฟิลด์ความยาวตัวแปร 5 ช่อง -

Expires- วันที่คุกกี้จะหมดอายุ หากว่างเปล่าคุกกี้จะหมดอายุเมื่อผู้เยี่ยมชมออกจากเบราว์เซอร์
Domain - ชื่อโดเมนของไซต์ของคุณ
Path- เส้นทางไปยังไดเร็กทอรีหรือเว็บเพจที่ตั้งค่าคุกกี้ ซึ่งอาจว่างเปล่าหากคุณต้องการดึงคุกกี้จากไดเร็กทอรีหรือเพจใด ๆ
Secure- หากช่องนี้มีคำว่า "ปลอดภัย" คุกกี้จะถูกเรียกคืนด้วยเซิร์ฟเวอร์ที่ปลอดภัยเท่านั้น หากฟิลด์นี้ว่างแสดงว่าไม่มีข้อ จำกัด ดังกล่าว
Name=Value - คุกกี้ถูกตั้งค่าและเรียกดูในรูปแบบของคู่คีย์ - ค่า

เดิมคุกกี้ถูกออกแบบมาสำหรับการเขียนโปรแกรม CGI ข้อมูลที่อยู่ในคุกกี้จะถูกส่งโดยอัตโนมัติระหว่างเว็บเบราว์เซอร์และเว็บเซิร์ฟเวอร์ดังนั้นสคริปต์ CGI บนเซิร์ฟเวอร์จึงสามารถอ่านและเขียนค่าคุกกี้ที่เก็บไว้บนไคลเอนต์ได้

JavaScript ยังสามารถจัดการคุกกี้โดยใช้ไฟล์ cookie คุณสมบัติของ Documentวัตถุ. JavaScript สามารถอ่านสร้างแก้ไขและลบคุกกี้ที่ใช้กับหน้าเว็บปัจจุบัน

การจัดเก็บคุกกี้

วิธีที่ง่ายที่สุดในการสร้างคุกกี้คือกำหนดค่าสตริงให้กับอ็อบเจกต์ document.cookie ซึ่งมีลักษณะดังนี้

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

ที่นี่ expiresแอตทริบิวต์เป็นทางเลือก หากคุณระบุแอตทริบิวต์นี้พร้อมกับวันที่หรือเวลาที่ถูกต้องคุกกี้จะหมดอายุในวันที่หรือเวลาที่กำหนดและหลังจากนั้นจะไม่สามารถเข้าถึงค่าของคุกกี้ได้

Note- ค่าคุกกี้ต้องไม่รวมอัฒภาคจุลภาคหรือช่องว่าง ด้วยเหตุนี้คุณอาจต้องการใช้ JavaScriptescape()ฟังก์ชันเข้ารหัสค่าก่อนจัดเก็บในคุกกี้ หากคุณทำเช่นนี้คุณจะต้องใช้ไฟล์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>

เอาต์พุต

ตอนนี้เครื่องของคุณมีคุกกี้ชื่อว่า name. คุณสามารถตั้งค่าคุกกี้หลายรายการโดยใช้คู่คีย์ = ค่าหลายคู่โดยคั่นด้วยลูกน้ำ

คุกกี้การอ่าน

การอ่านคุกกี้นั้นง่ายพอ ๆ กับการเขียนคุกกี้เพราะค่าของอ็อบเจกต์ document.cookie คือคุกกี้ ดังนั้นคุณสามารถใช้สตริงนี้ได้ทุกเมื่อที่คุณต้องการเข้าถึงคุกกี้ สตริง document.cookie จะเก็บรายการของคู่ชื่อ = ค่าโดยคั่นด้วยอัฒภาคโดยที่name คือชื่อของคุกกี้และค่าคือค่าสตริง

คุณสามารถใช้สตริง ' 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>

Note - ที่นี่ length เป็นวิธีการของ Arrayคลาสที่ส่งกลับความยาวของอาร์เรย์ เราจะพูดถึงอาร์เรย์ในบทที่แยกต่างหาก เมื่อถึงเวลานั้นโปรดพยายามย่อยมัน

Note- อาจมีคุกกี้อื่น ๆ ตั้งอยู่ในเครื่องของคุณแล้ว รหัสด้านบนจะแสดงคุกกี้ทั้งหมดที่ตั้งไว้ในเครื่องของคุณ

การตั้งค่าวันหมดอายุของคุกกี้

คุณสามารถยืดอายุของคุกกี้ได้นอกเหนือจากเซสชันของเบราว์เซอร์ปัจจุบันโดยตั้งค่าวันที่หมดอายุและบันทึกวันหมดอายุไว้ในคุกกี้ ซึ่งสามารถทำได้โดยการตั้งค่า‘expires’ แอตทริบิวต์วันที่และเวลา

ตัวอย่าง

ลองดูตัวอย่างต่อไปนี้ แสดงวิธีการขยายวันหมดอายุของคุกกี้เป็น 1 เดือน

<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>

เอาต์พุต