Javascript - Cookies - Amzuni - Học lập trình trực tuyến

Cookie là gì?

Trình duyệt web và Máy chủ sử dụng giao thức HTTP để giao tiếp và HTTP là giao thức không trạng thái. Nhưng đối với một trang web thương mại, việc duy trì thông tin phiên giữa các trang khác nhau là bắt buộc. Ví dụ: đăng ký một người dùng kết thúc sau khi hoàn thành nhiều trang. Nhưng làm cách 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 tùy chọn, giao dịch mua, hoa hồng và các thông tin cần thiết khác để có trải nghiệm tốt hơn cho khách truy cập hoặc thống kê trang web.

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 đúng như vậy, nó sẽ được lưu dưới dạng 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 sẽ biết/ghi nhớ những gì đã được lưu trữ trước đó.

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

 Hết hạn - Ngày cookie sẽ hết hạn. Nếu phần này trống, cookie sẽ hết hạn khi khách truy cập thoát khỏi trình duyệt.

 Tên miền - Tên miền của trang web của bạn.

 Đường dẫn - Đường dẫn đến thư mục hoặc trang web đặt cookie. Phần này có thể để trống nếu bạn muốn truy xuất cookie từ bất kỳ thư mục hoặc trang nào.

 Bảo mật − Nếu trường này chứa từ "an toàn", thì cookie chỉ có thể được truy xuất bằng một máy chủ bảo mật. Nếu trường này trống, thì không có giới hạn nào tồn tại.

 Tên = Giá trị - Cookie được đặt và truy xuất ở dạng cặp khóa-giá trị

Cookie ban đầu được thiết kế cho 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ác cookie bằng thuộc tính cookie của đối tượng Tài liệu. 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, giống như thế này.

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

Ở đây thuộc tính hết hạn là tùy chọn. Nếu bạn cung cấp ngày hoặc giờ hợp lệ cho thuộc tính này, 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.

Lưu ý – Các 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 hàm JavaScript escape() để mã hóa giá trị trước khi lưu trữ giá trị đó trong cookie. Nếu làm điều này, bạn cũng sẽ phải sử dụng hàm unescape() tương ứng khi đọc giá trị cookie.
Ví 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>

Bây giờ máy của bạn có một cookie được gọi là tên. Bạn có thể đặt nhiều cookie bằng cách sử dụng nhiều cặp khóa = giá trị đượ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, bởi vì giá trị của đối tượng document.cookie 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 tên=giá trị được phân tách bằng dấu chấm phẩy, trong đó tên là tên của cookie và giá trị là giá trị chuỗi của nó.

Bạn có thể sử dụng hàm split() của chuỗi để chia chuỗi thành khóa và giá trị như sau –
Ví 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>

Lưu ý – Ở đây, độ dài là một phương thức của lớp Array 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. Đến lúc đó, hãy cố gắng tiêu hóa 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 đặt thuộc tính ‘hết hạn’ thành ngày và giờ.
Ví dụ

Hãy thử ví dụ sau. Nó minh họa cách gia hạn ngày hết hạn 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>

Xóa Cookie

Đôi khi bạn sẽ muốn xóa một cookie để những nỗ lực đọc cookie sau đó 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ứ.
Ví 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 sau ngày hiện tại một 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>