Cookie vừa là một món ăn nhẹ ngon lành vừa là một phần quan trọng của các trang web hiện đại.
Cookie cho phép bạn lưu trữ dữ liệu về người dùng trong trình duyệt web. Cookie thường lưu trữ thông tin như phiên xác thực để trình duyệt ghi nhớ bạn đã đăng nhập vào một trang web.
Trong hướng dẫn này, chúng ta sẽ nói về lý do tồn tại cookie, có những loại cookie nào và cách sử dụng cookie trong JavaScript. Hãy bắt đầu!
Cookie trình duyệt là gì?
Cookie là các chuỗi văn bản lưu trữ thông tin về người dùng trong trình duyệt của họ. Ý tưởng này được tiên phong bởi Netscape, công ty đã phát triển một trong những trình duyệt phổ biến nhất trên thế giới vào những năm 1990. Netscape đã phát triển cookie để theo dõi liệu người dùng đã truy cập trang web của họ hay chưa. Nếu họ có, điều đó có nghĩa là người dùng có thể biết điều gì đó về Netscape.
Cookie phải chứa ít nhất một tên và một trường giá trị. Trường tên được sử dụng để xác định nội dung của trường giá trị. Cookie có thể lưu trữ các thuộc tính bổ sung như đường dẫn tệp và khi nó hết hạn, tùy thuộc vào cách bạn đang sử dụng cookie trong các ứng dụng của mình.
Dưới đây là một ví dụ về cookie:
Name: Authentication Value: AUTHENTICATION_KEY Domain: careerkarma.com
Cookie được lưu trữ trong các cặp key:value. Khi bạn xem cookie này, bạn sẽ thấy như sau:
Authentication=AUTHENTICATION_KEY
Cookie này sẽ lưu trữ giá trị AUTHENTICATION_KEY trong trình duyệt của bạn. Mỗi khi bạn truy cập vào miền Careerkarma.com, cookie đó sẽ được cung cấp cho trang web.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Không có giới hạn về số lượng cookie bạn có thể đặt cho một trang web, nhưng những gì bạn sẽ thấy là hầu hết các ứng dụng chỉ cần đặt một vài cookie, nếu có. Thông thường, cookie được sử dụng để theo dõi phiên của người dùng.
Lấy cookie trình duyệt
JavaScript có một đối tượng được gọi là document.cookie lưu trữ thông tin về tất cả các cookie có sẵn cho một trang web. Để thiết lập, cập nhật và xóa cookie, chúng ta cần thao tác với đối tượng này. Để truy xuất cookie, chúng ta chỉ có thể gọi đối tượng này:
console.log(document.cookie);
Mã này sẽ trả về danh sách tất cả các cookie được đặt trong trình duyệt. Không có cách nào để truy xuất một cookie riêng lẻ từ danh sách này mà không viết một hàm tùy chỉnh để làm như vậy.
Cách đặt Cookie trình duyệt
Làm cách nào để đặt cookie của trình duyệt? Chà, có một điều bạn nên biết trước:nó được cho là dễ dàng hơn so với việc bạn tự nướng bánh quy.
Giả sử chúng tôi muốn lưu trữ email của người dùng trong cookie. Chúng tôi có thể làm như vậy bằng cách sử dụng mã JavaScript này:
document.cookie = "email=user@email.com"; console.log(document.cookie);
Mã này tạo một cookie với tên “email” và giá trị “user@email.com.” console.log() của chúng tôi câu lệnh trả về như sau:
email=user@email.com;
Bạn cũng có thể chỉ định một đường dẫn có sẵn cookie:
document.cookie = "email=user@email.com; path=/dashboard";
Mã này sẽ cung cấp cookie “email” trên tất cả các đường dẫn bắt đầu bằng “/ dashboard”.
Ngày hết hạn cookie
Theo mặc định, cookie sẽ bị xóa khi trình duyệt bị đóng. Khi bạn đang đặt cookie, bạn có thể tùy chọn thêm ngày hết hạn sẽ 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 sẽ tạo ra một cookie hết hạn vào ngày 24 tháng 6 năm 2020 vào đầu ngày. Ngày hết hạn của bạn phải được chỉ định theo giờ UTC.
Một cách tiếp cận phổ biến để đặt ngày hết hạn là sử dụng đối tượng JavaScript Date, đối tượng này trả về dấu thời gian UTC. Một cookie được đặt để hết hạn vào ngày 30 tháng 6 năm 2020 sẽ sử dụng mã này:
const expiryDate = new Date(2020, 6, 30); document.cookie = "email=user@email.com; expires=" + expiryDate + ";";
Đối tượng document.cookie hỗ trợ thiết lập độ tuổi tối đa của cookie, hoặc Độ tuổi tối đa, cho biết thời gian cookie sẽ có sẵn trước khi hết hạn. Mặc dù nó không được mọi trình duyệt hỗ trợ, nhưng nó giúp bạn dễ dàng tạo cookie hết hạn tùy thuộc vào thời điểm người dùng bắt đầu tạo cookie:
const expiryDate= 24 * 60 * 60 * 2; document.cookie = "email=user@email.com; max-age=" + expiryDate + ";";
Điều này sẽ tạo ra một cookie hết hạn sau hai ngày.
Cập nhật và xóa cookie
Không có chức năng nào được sử dụng để cập nhật hoặc xóa cookie. Thay vào đó, bạn thực hiện một thay đổi đối với đối tượng “document.cookie”.
Bạn có thể cập nhật cookie theo cách giống như cách bạn đã tạo:
document.cookie = "email=user@email.app;"
Điều này thay đổi giá trị của “email” từ “user@email.com” thành “user@email.app”.
Xóa cookie sử dụng một cách tiếp cận tương tự. Tất cả những gì bạn phải làm là sử dụng cú pháp tương tự như được sử dụng để tạo hoặc cập nhật cookie, nhưng xóa giá trị được gán cho cookie:
document.cookie = "email=; expires=Wed, 24 Jun 2019 12:00:00 UTC; path/;"
Bạn nên chỉ định một đường dẫn để đảm bảo rằng bạn xóa đúng cookie.
Các loại cookie
Dâu rừng. Bánh quy socola. Tin giờ chót. Không, không phải những loại cookie đó! Trong trình duyệt, có ba loại cookie chính:phiên, bên thứ ba và liên tục.
Cookie phiên là cookie tồn tại cho đến khi đóng trình duyệt. Đây là những cookie được đặt mà không có ngày hết hạn, giống như cookie trong ví dụ đầu tiên của chúng tôi. Cần lưu ý rằng một số nhà phát triển sử dụng thuật ngữ “cookie phiên” để chỉ bất kỳ cookie nào xác thực người dùng, nhưng cookie phiên không phải là cookie duy nhất bạn có thể sử dụng để xác thực.
Cookie liên tục là những cookie tồn tại ngay cả khi trình duyệt đã đóng. Đây là những cookie có ngày hết hạn đã định.
Cookie của bên thứ ba là cookie đã được tạo bởi các trang web khác. Một ví dụ về điều này là cookie Google Analytics. Nếu bạn cài đặt Google Analytics trên trang web của mình, tiện ích mở rộng sẽ có thể đặt cookie để theo dõi người dùng.
Kết luận
Cookie là một cách tiện dụng để lưu trữ thông tin người dùng trong trình duyệt. Chúng thường được sử dụng để theo dõi liệu người dùng đã truy cập một trang web trước đây hay chưa và để lưu trữ cookie xác thực.
Có ba loại cookie chính:phiên, liên tục và bên thứ ba. Đối với các ứng dụng của riêng bạn, bạn sẽ chủ yếu tập trung vào việc sử dụng cookie phiên và liên tục.