JavaScript - Thuộc tính Cookie
Xin chào các bạn đang theo đuổi nghề phát triển web! Hôm nay, chúng ta sẽ bắt đầu một hành trình ngọt ngào vào thế giới của cookies. Không phải loại cookie sô-cô-la (dù tôi rất muốn!), mà là những cookie số hóa giúp trải nghiệm web của chúng ta mượt mà và cá nhân hóa hơn. Vậy, hãy chuẩn bị ly sữa ảo của bạn, và cùng tôi lặn vào chủ đề hấp dẫn về Thuộc tính Cookie trong JavaScript!
Thuộc tính Cookie
Trước khi chúng ta đi vào chi tiết, hãy hiểu thuộc tính cookie là gì. Hãy tưởng tượng cookie như những ghi chú nhỏ mà trình duyệt của bạn lưu về bạn. Thuộc tính cookie giống như những hướng dẫn đặc biệt trên những ghi chú này,告诉 trình duyệt cách xử lý chúng. Chúng rất quan trọng cho an ninh, chức năng và trải nghiệm người dùng.
Dưới đây là một cái nhìn nhanh về các thuộc tính cookie chính mà chúng ta sẽ thảo luận:
| Thuộc tính | Mô tả |
|---|---|
| Name/Value | Dữ liệu cốt lõi của cookie |
| Path | Chỉ định哪些路径在服务器上可以访问 cookie |
| Expires | Đặt ngày hết hạn cho cookie |
| Max-Age | Định nghĩa cookie nên kéo dài bao lâu |
| Domain | Xác định哪些域名可以使用 cookie |
Kiểm tra Giá trị Thuộc tính trong Trình duyệt
Trước khi chúng ta bắt đầu thiết lập cookies, hãy học cách kiểm tra chúng. Mở công cụ phát triển của trình duyệt của bạn (thường là F12), đi tới tab Application hoặc Storage, và tìm Cookies. Đó giống như nhìn vào lọ cookie!
// Đặt một cookie đơn giản
document.cookie = "username=John Doe";
// Kiểm tra trong console
console.log(document.cookie);Khi bạn chạy đoạn mã này và kiểm tra console, bạn sẽ thấy "username=John Doe". Đó là cách đơn giản để đặt và đọc một cookie cơ bản!
Thuộc tính Name/Value của Cookie
Cặp tên/giá trị là trái tim của một cookie. Nó giống như một chìa khóa và kho báu tương ứng của nó.
// Đặt một cookie với tên và giá trị
document.cookie = "favoriteColor=blue";
// Đặt nhiều cookie
document.cookie = "favoriteAnimal=dog";
document.cookie = "favoriteNumber=42";
// Đọc cookies
console.log(document.cookie);Điều này sẽ xuất ra tất cả cookies của bạn. Nhớ rằng, mỗi document.cookie assignment thêm một cookie mới, nó không ghi đè lên các cookie hiện có!
Thuộc tính Path của Cookie
Thuộc tính path xác định哪些 trang trên trang web của bạn có thể truy cập cookie. Nó giống như告诉 cookie nào phòng trong ngôi nhà của trang web của bạn nó được phép vào.
// Đặt một cookie cho một đường dẫn cụ thể
document.cookie = "user=Alice; path=/dashboard";
// Đặt một cookie cho toàn bộ trang web
document.cookie = "theme=dark; path=/";Trong ví dụ này, cookie "user" chỉ có thể truy cập trong đường dẫn "/dashboard" và các con đường con của nó, trong khi cookie "theme" có thể truy cập khắp toàn bộ trang web.
Thuộc tính Expires của Cookie
Thuộc tính expires đặt một ngày cụ thể khi cookie nên bị xóa. Nó giống như đặt ngày hết hạn trên sữa!
// Đặt một cookie hết hạn sau 7 ngày
let expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + 7);
document.cookie = "subscription=premium; expires=" + expirationDate.toUTCString();Cookie này sẽ tự hủy sau 7 ngày. Mission Impossible, phong cách cookie!
Thuộc tính maxAge của Cookie
Thuộc tính maxAge đặt thời gian cookie nên kéo dài trong giây. Nó giống như một đồng hồ đếm ngược cho cookie của bạn.
// Đặt một cookie kéo dài trong 1 giờ
document.cookie = "session=active; max-age=3600";
// Đặt một cookie xóa ngay lập tức
document.cookie = "tempData=123; max-age=0";Cookie đầu tiên sẽ kéo dài trong một giờ, trong khi cookie thứ hai giống như một tin nhắn tự hủy - nó biến mất ngay khi được tạo!
Thuộc tính Domain của Cookie
Thuộc tính domain chỉ định哪些域名 có thể truy cập cookie. Nó giống như quyết định哪些 bạn bè có thể chia sẻ công thức bí mật của bạn.
// Đặt một cookie cho域名 hiện tại và tất cả các subdomain của nó
document.cookie = "language=en; domain=.example.com";
// Đặt một cookie cho域名 chính xác
document.cookie = "userId=12345; domain=shop.example.com";Trong ví dụ đầu tiên, cookie có thể truy cập trên example.com và tất cả các subdomain của nó (như blog.example.com). Cookie thứ hai chỉ cho shop.example.com.
Bây giờ, hãy öss lại tất cả trong một ví dụ phức tạp hơn:
function setCookie(name, value, days, path, domain, secure) {
let expires = "";
if (days) {
let date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires +
(path ? "; path=" + path : "") +
(domain ? "; domain=" + domain : "") +
(secure ? "; secure" : "");
}
// Sử dụng
setCookie("username", "JohnDoe", 7, "/", "example.com", true);Đ 功能 này cho phép bạn đặt một cookie với tất cả các thuộc tính chúng ta đã thảo luận. Nó giống như một瑞士军刀 cho việc tạo cookie!
Nhớ rằng, cookies là những công cụ mạnh mẽ, nhưng với quyền lực lớn đi kèm với trách nhiệm lớn. Luôn luôn cẩn thận với quyền riêng tư và an ninh của người dùng khi sử dụng cookies.
Và thế là bạn đã có nó, các bạn! Bây giờ bạn đã được trang bị đầy đủ để xử lý cookies trong JavaScript. Lần sau khi bạn lướt web và nó nhớ các偏好 của bạn, bạn sẽ biết bí mật ngọt ngào đằng sau nó. Chúc các bạn mã hóa vui vẻ, và hy vọng cookies của bạn luôn tươi mới và an toàn!
Credits: Image by storyset