JavaScript và Cookie

Cookies là gì?

Trình duyệt Web và Máy chủ sử dụng giao thức HTTP để giao tiếp và HTTP là một giao thức không trạng thái. Nhưng đối với một trang web thương mại, bắt buộc phải duy trì thông tin phiên giữa các trang khác nhau. Ví dụ: một đăng ký người dùng kết thúc sau khi hoàn thành nhiều trang. Nhưng làm thế nào để duy trì thông tin phiên của người dùng trên tất cả các trang web.

Trong nhiều trường hợp, sử dụng cookie là phương pháp hiệu quả nhất để ghi nhớ và theo dõi các sở thích, mua hàng, hoa hồng và các thông tin khác cần thiết để có trải nghiệm khách truy cập hoặc thống kê trang web tốt hơn.

Làm thế nào nó hoạt động ?

Máy chủ của bạn gửi một số dữ liệu đến trình duyệt của khách truy cập dưới dạng cookie. Trình duyệt có thể chấp nhận cookie. Nếu có, nó sẽ được lưu trữ dưới dạng một bản ghi văn bản thuần túy trên ổ cứng của khách truy cập. Bây giờ, khi khách truy cập đến một trang khác trên trang web của bạn, trình duyệt sẽ gửi cùng một cookie đến máy chủ để truy xuất. Sau khi được truy xuất, máy chủ của bạn biết / ghi nhớ những gì đã được lưu trữ trước đó.

Cookie là một bản ghi dữ liệu văn bản thuần túy gồm 5 trường có độ dài thay đổi -

Expires- Ngày cookie sẽ hết hạn. Nếu ô này trống, cookie sẽ hết hạn khi khách truy cập thoát khỏi trình duyệt.
Domain - Tên miền của trang web của bạn.
Path- Đường dẫn đến thư mục hoặc trang web đặt cookie. Điều này có thể để trống nếu bạn muốn lấy cookie từ bất kỳ thư mục hoặc trang nào.
Secure- Nếu trường này chứa từ "an toàn", thì cookie chỉ có thể được truy xuất bằng máy chủ bảo mật. Nếu trường này trống, không có hạn chế như vậy tồn tại.
Name=Value - Cookie được thiết lập và truy xuất dưới dạng các cặp khóa-giá trị

Cookie ban đầu được thiết kế để lập trình CGI. Dữ liệu chứa trong cookie được truyền tự động giữa trình duyệt web và máy chủ web, vì vậy các tập lệnh CGI trên máy chủ có thể đọc và ghi các giá trị cookie được lưu trữ trên máy khách.

JavaScript cũng có thể thao túng cookie bằng cách sử dụng cookie tài sản của Documentvật. JavaScript có thể đọc, tạo, sửa đổi và xóa các cookie áp dụng cho trang web hiện tại.

Lưu trữ Cookie

Cách đơn giản nhất để tạo cookie là gán một giá trị chuỗi cho đối tượng document.cookie, trông giống như thế này.

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

Đây expiresthuộc tính là tùy chọn. Nếu bạn cung cấp cho thuộc tính này một ngày hoặc giờ hợp lệ, thì cookie sẽ hết hạn vào một ngày hoặc giờ nhất định và sau đó, giá trị của cookie sẽ không thể truy cập được.

Note- Giá trị cookie không được bao gồm dấu chấm phẩy, dấu phẩy hoặc khoảng trắng. Vì lý do này, bạn có thể muốn sử dụng JavaScriptescape()chức năng mã hóa giá trị trước khi lưu trữ nó trong cookie. Nếu bạn làm điều này, bạn cũng sẽ phải sử dụngunescape() chức năng khi bạn đọc giá trị cookie.

Thí dụ

Hãy thử những điều sau đây. Nó đặt tên khách hàng trong cookie đầu vào.

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

Đầu ra

Bây giờ máy của bạn có một cookie được gọi là name. Bạn có thể đặt nhiều cookie bằng cách sử dụng nhiều cặp key = value được phân tách bằng dấu phẩy.

Đọc cookie

Đọc một cookie cũng đơn giản như viết một cookie, vì giá trị của đối tượng document.cookie chính là cookie. Vì vậy, bạn có thể sử dụng chuỗi này bất cứ khi nào bạn muốn truy cập cookie. Chuỗi document.cookie sẽ giữ một danh sách các cặp name = value được phân tách bằng dấu chấm phẩy, trong đóname là tên của cookie và giá trị là giá trị chuỗi của nó.

Bạn có thể sử dụng chuỗi ' split() hàm ngắt một chuỗi thành khóa và các giá trị như sau:

Thí dụ

Hãy thử ví dụ sau để lấy tất cả các cookie.

<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 - Đây length là một phương pháp của Arraylớp trả về độ dài của một mảng. Chúng ta sẽ thảo luận về Mảng trong một chương riêng biệt. Đến lúc đó, hãy cố gắng tiêu hóa nó.

Note- Có thể có một số cookie khác đã được đặt trên máy của bạn. Đoạn mã trên sẽ hiển thị tất cả các cookie được đặt trên máy của bạn.

Đặt ngày hết hạn cookie

Bạn có thể kéo dài tuổi thọ của cookie ngoài phiên trình duyệt hiện tại bằng cách đặt ngày hết hạn và lưu ngày hết hạn trong cookie. Điều này có thể được thực hiện bằng cách thiết lập‘expires’ thuộc tính ngày và giờ.

Thí dụ

Hãy thử ví dụ sau. Nó minh họa cách kéo dài thời hạn sử dụng của cookie thêm 1 tháng.

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

Đầu ra

Xóa cookie

Đôi khi bạn sẽ muốn xóa một cookie để những lần đọc cookie tiếp theo không trả lại kết quả gì. Để làm điều này, bạn chỉ cần đặt ngày hết hạn thành một thời điểm trong quá khứ.

Thí dụ

Hãy thử ví dụ sau. Nó minh họa cách xóa cookie bằng cách đặt ngày hết hạn của nó chậm hơn một tháng so với ngày hiện tại.

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

Đầu ra