Cookie vừa là món ăn ngon vừa là phần quan trọng của trang web hiện đại.
Cookie cho phép lưu trữ dữ liệu về người dùng trong trình duyệt web. Cookie thường lưu thông tin như phiên xác thực để trình duyệt nhớ bạn đã đăng nhập trang web.
Trong hướng dẫn này, chúng ta sẽ nói về tại sao cookie tồn tại, loại cookie nào có và cách dùng cookie trong JavaScript. Hãy bắt đầu!
Cookie Trình Duyệt Là Gì?
Cookie là chuỗi văn bản lưu thông tin về người dùng trong trình duyệt của họ. Ý tưởng được tiên phong bởi Netscape, phát triển một trong trình duyệt phổ biến nhất thế giới thập niên 1990. Netscape phát triển cookie để theo dõi người dùng đã truy cập trang của họ chưa. Nếu đã truy cập, nghĩa là người dùng có thể biết gì về Netscape.
Cookie phải chứa ít nhất trường tên và giá trị. Trường tên dùng để xác định nội dung trường giá trị. Cookie có thể lưu thuộc tính bổ sung như đường dẫn file và khi nào hết hạn, tùy thuộc vào cách dùng cookie trong ứng dụng.
Ví dụ cookie:
Name: Authentication Value: AUTHENTICATION_KEY Domain: careerkarma.com
Cookie lưu theo cặp key:value. Khi xem cookie này, bạn thấy:
Authentication=AUTHENTICATION_KEY
Cookie này lưu giá trị AUTHENTICATION_KEY trong trình duyệt. Mỗi lần truy cập domain careerkarma.com, cookie đó được cung cấp cho trang.
Không giới hạn số cookie bạn đặt cho trang, nhưng bạn sẽ thấy hầu hết ứng dụng chỉ cần đặt vài cái, nếu có. Thường cookie dùng để theo dõi phiên người dùng.
Truy Xuất Cookie Trình Duyệt
JavaScript có đối tượng document.cookie lưu thông tin về tất cả cookie khả dụng cho trang. Để đặt, cập nhật và xóa cookie, cần thao tác đối tượng này. Để truy xuất cookie, chỉ cần gọi đối tượng:
console.log(document.cookie);
Mã này trả về danh sách tất cả cookie đặt trong trình duyệt. Không có cách truy xuất cookie riêng lẻ từ danh sách này mà không viết hàm tùy chỉnh.
Cách Đặt Cookie Trình Duyệt
Làm thế nào đặt cookie trình duyệt? Có một điều bạn nên biết trước: có lẽ dễ hơn nấu cookie của riêng bạn.
Giả sử muốn lưu email người dùng trong cookie. Có thể làm bằng mã JavaScript:
document.cookie = "email=user@email.com"; console.log(document.cookie);
Mã này tạo cookie tên "email" giá trị "user@email.com." Câu lệnh console.log() trả về:
email=user@email.com;
Bạn cũng có thể chỉ định đường dẫn cookie khả dụng:
document.cookie = "email=user@email.com; path=/dashboard";
Mã này làm cookie "email" khả dụng trên tất cả đường dẫn bắt đầu bằng "/dashboard".
Ngày Hết Hạn Cookie
Mặc định, cookie bị xóa khi đóng trình duyệt. Khi đặt cookie, bạn có thể tùy chọn thêm ngày hết hạn ghi đè cài đặt này:
document.cookie = "email=user@email.com; expires=Wed, 24 Jun 2019 12:00:00 UTC";
Điều này tạo cookie hết hạn ngày 24/6/2020 đầu ngày. Ngày hết hạn nên chỉ định theo thời gian UTC.
Một cách phổ biến đặt ngày hết hạn là dùng đối tượng Date JavaScript, trả về dấu thời gian UTC. Cookie hết hạn 30/6/2020 dùng mã:
const expiryDate = new Date(2020, 6, 30); document.cookie = "email=user@email.com; expires=" + expiryDate + ";";
Đối tượng document.cookie hỗ trợ đặt tuổi tối đa cookie, hoặc Max-Age, nói cookie nên khả dụng bao lâu trước khi hết hạn. Mặc dù không được mọi trình duyệt hỗ trợ, nó làm dễ dàng tạo cookie hết hạn tùy thuộc khi người dùng khởi tạo cookie:
const expiryDate= 24 * 60 * 60 * 2; document.cookie = "email=user@email.com; max-age=" + expiryDate + ";";
Điều này tạo cookie hết hạn sau hai ngày.
Cập Nhật Và Xóa Cookie
Không có hàm dùng để cập nhật hoặc xóa cookie. Thay vào đó, bạn thay đổi đối tượng "document.cookie".
Bạn có thể cập nhật cookie giống cách tạo nó:
document.cookie = "email=user@email.app;"
Điều này thay giá trị "email" từ "user@email.com" thành "user@email.app".
Xóa cookie dùng cách tương tự. Chỉ cần dùng cùng cú pháp tạo/cập nhật cookie, nhưng bỏ giá trị gán cho cookie:
document.cookie = "email=; expires=Wed, 24 Jun 2019 12:00:00 UTC; path/;"
Bạn nên chỉ định đường dẫn để chắc chắn xóa đúng cookie.
Loại Cookie
Mâm xôi (Raspberry). Chocolate Chip. Fudge. Không, không phải loại cookie đó! Trong trình duyệt, có ba loại cookie chính: session, third-party và persistent.
Session cookie tồn tại cho đến khi đóng trình duyệt. Đây là cookie đặt không có ngày hết hạn, như ví dụ đầu.值得注意的是一些开发者用"session cookie"指任何认证用户的cookie，但session cookie不是唯一可用于认证的cookie。
Persistent cookie tồn tại даже sau khi đóng trình duyệt. Đây là cookie có ngày hết hạn đặt trước.
Third-party cookie là cookie được tạo bởi trang web khác. Ví dụ cookie Google Analytics. Nếu cài Google Analytics trên trang, tiện ích có thể đặt cookie theo dõi người dùng.
Kết Luận
Cookie là cách tiện lợi lưu thông tin người dùng trong trình duyệt. Chúng thường dùng theo dõi người dùng đã truy cập trang trước chưa và lưu cookie xác thực.
Có ba loại cookie chính: session, persistent và third-party. Cho ứng dụng của bạn, bạn chủ yếu tập trung dùng session và persistent cookie.