JavaScript: Cookie

Khóa học qua video:
Lập trình Python All Lập trình C# All SQL Server All Lập trình C All Java PHP HTML5-CSS3-JavaScript
Đăng ký Hội viên
Tất cả các video dành cho hội viên

Trình duyệt web và Máy chủ sử dụng giao thức HTTP để liên lạc. HTTP là giao thức không trạng thái, nghĩa là, nó không duy trì dữ liệu của khách qua nhiều yêu cầu được thực hiện bởi khách. Chu trình đáp ứng yêu cầu hoàn chỉnh này giữa máy khách và máy chủ được xác định là một phiên. Cookie là cơ chế mặc định được các trình duyệt sử dụng để lưu trữ dữ liệu liên quan đến phiên của người dùng.

Cách thức hoạt động

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

Cookie là bản ghi dữ liệu dạng văn bản đơn giản của 5 trường có độ dài thay đổi.

  • Expires: Ngày cookie sẽ hết hạn. Nếu để trống thì 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 ta.

  • Path: Đường dẫn đến thư mục hoặc trang web đặt cookie. Ta có thể để trống nếu 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ừ "secure", thì cookie chỉ có thể được truy xuất với một máy chủ an toàn. Nếu trường này trống thì sẽ không có giới hạn bảo mật nào được yêu cầu.

  • Name = Value: Cookie được đặt và truy xuất dưới dạng các cặp key-value.

Cookie ban đầu được thiết kế để lập trình CGI. Dữ liệu chứa trong cookie được tự động truyền 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ữ ở phía 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 và xóa các cookie áp dụng cho trang web hiện thời.

Lưu trữ Cookie

Cách đơn giản nhất để tạo cookie là gán giá trị chuỗi cho đối tượng document.cookie:

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

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

Lưu ý: Giá trị cookie không bao gồm dấu chấm phẩy, dấu phẩy hoặc khoảng trắng. Vì lý do này, ta có thể cần sử dụng hàm esc() của JavaScript để mã hóa giá trị trước khi lưu trữ nó trong cookie. Khi đó cũng sẽ phải sử dụng hàm unescape() tương ứng khi đọc giá trị cookie.

Ví dụ

<html> 
   <head> 
      <script>
         function writeCookie() {  
            cookieValue =  escape(document.myform.myName.value) + ";";
            document.cookie = "name = " + cookieValue;
            document.write("Thiết lập Cookie : " + "name = " + cookieValue );
         }
      </script> 
   </head> 
      
   <body> 
      <form name="myform"> 
         Nhập tên của bạn: <input type="text" name="myName" required> 
         <input type="button" value="Thiết lập" onclick="writeCookie()"> 
      </form> 
   </body> 
</html>

Output:

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

Đọc Cookie

Đọc cookie chỉ đơn giản là lấy giá trị của đối tượng document.cookie. Vì vậy, ta có thể sử dụng chuỗi này bất cứ khi nào muốn truy cập cookie. document.cookie sẽ lưu 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 đó tên là tên của cookie và giá trị là giá trị chuỗi của nó.

Ta có thể sử dụng hàm split() của chuỗi để tách chuỗi thành các key và value như trong ví dụ dưới đây.

Ví dụ

<html>
   <head>
      <script>
         function docCookie() {
            var allCookies  =  document.cookie;
            document.write ("Tất cả các cookie : " + allCookies + "<br>");
            // Chuyển tất cả các cookie vào một mảng dùng hàm split()
            cookieArray = allCookies.split(';');
         
            // Dùng vòng lặp for lấy từng cặp key-value
            for(var i = 0; i<cookieArray.length; i++) {
               key = cookieArray[i].split('=')[0];
               value = cookieArray[i].split('=')[1];
               document.write("<br>Key : " + key + ", Value : " + value);
            }
         }
      </script>
   </head>

   <body> 
      <form>
         <p>Nhấn nút dưới đây để xem kết quả:</p> 
         <input type="button" value="Lấy Cookie" onclick="docCookie()"> 
      </form> 
   </body> 
</html>

Lưu ý: Ở đây, length là thuộc tính của lớp Array, nó lưu độ dài của một mảng.

Đoạn code trên sẽ hiển thị tất cả các cookie được đặt trên máy tính của ta.

Output:

Cài đặt ngày hết hạn Cookie

Ta có thể kéo dài thời hạn 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 vào trong cookie. Điều này có thể được thực hiện bằng cách đặt thuộc tính 'expires' thành ngày và giờ. Ví dụ sau minh họa cách kéo dài thời hạn sử dụng của cookie thêm 1 tháng.

Ví dụ

<html> 
   <head> 
      <script>
         function setCookie() {  
            var thoiGian = new Date();  
            thoiGian.setMonth(thoiGian.getMonth() + 1);  
            cookie = escape(document.frm.coName.value) + ";"  
            document.cookie = "name = " + cookie;  
            document.cookie = "expires = " + thoiGian.toUTCString() + ";"  
            document.write ("Thiết lập cookie : " + "name = " + cookie);  
         } 
      </script> 
   </head> 

   <body>
      <form name="frm">
         Nhập tên cookie: <input name="coName"> 
         <input type="button" value="Thiết lập Cookie" onclick="setCookie()"> 
      </form> 
   </body> 
</html>

Output:

Xóa cookie

Đôi khi ta muốn xóa cookie để muốn những lần đọc cookie sau đó sẽ không trả lại kết quả gì liên quan đến cookie đã xóa. Để thực hiện điều này thì ta chỉ cần đặt ngày hết hạn thành một thời gian trong quá khứ. Ví dụ sau minh họa cách xóa cookie bằng cách đặt ngày hết hạn của nó thành một tháng sau ngày hiện tại.

Ví dụ

<html>
   <head>
      <script>
         function delCookie() {
            var now = new Date()
            now.setMonth(now.getMonth() - 1)
            cookie = escape(document.frm.coName.value) + ";"
            document.cookie = "name=" + cookie
            document.cookie = "expires = " + now.toUTCString() + ";"
            document.write("Đã xóa cookie : " + "name = " + cookie)
         }
      </script>
   </head>

   <body>
      <form name="frm">
         Nhập tên cookie cần xóa: <input name="coName">
         <input type="button" value="Xóa Cookie" onclick="delCookie()">
      </form>
   </body>
</html>

Output:

» Tiếp: Chuyển hướng
« Trước: Sự kiện
Khóa học qua video:
Lập trình Python All Lập trình C# All SQL Server All Lập trình C All Java PHP HTML5-CSS3-JavaScript
Đăng ký Hội viên
Tất cả các video dành cho hội viên
Copied !!!