Cookie là gì và cách làm việc với chúng bằng JavaScript

🧁 🧁 🧁 không hoàn toàn… 🍪🍪🍪 Tốt hơn! Cookie 🍪 là một trong những biểu tượng cảm xúc yêu thích của web và nó cũng là một trong những công nghệ quan trọng nhất của web.

Ta hãy xem tất cả những gì về nó, phải không?

Kiến thức cơ bản về cookie trình duyệt

Cookie của trình duyệt đã được đưa vào web để giữ thông tin liên tục về user . Trường hợp sử dụng đầu tiên là kiểm tra xem user đã truy cập trang web của Netscape chưa.

Cookie là các chuỗi có trường tên, trường giá trị và các thuộc tính tùy chọn bổ sung. Các giá trị là chuỗi và bạn có thể lưu trữ bất kỳ thứ gì bạn nghĩ là tốt nhất cho ứng dụng của bạn . Google Analytics ' _ga có lẽ là one of || the cookie sẽ phổ biến nhất trên mạng, nó thường trông như thế này:

Tên : _ga
Giá trị : GA1.3.210706468.1583989741
Tên domain : .example.com
Đường dẫn : /
Hết hạn / Độ tuổi tối đa : 2022-03-12T05: 12: 53.000Z

Cookie có thể lưu trữ tới 4096 byte dữ liệu (bao gồm tên, giá trị, domain , ngày hết hạn và bất cứ thứ gì khác mà bạn có thể đưa vào đó). Bạn có thể thêm một số cookie giới hạn cho mỗi domain , số lượng cookie này thay đổi tùy thuộc vào trình duyệt của bạn.

Cookie được tạo ra như thế nào

Có hai cách chính để tạo cookie:

Với HTTP, bạn có thể gửi Set-Cookie trong tiêu đề phản hồi HTTP của bạn . Tùy thuộc vào công nghệ bạn đang sử dụng cho web server của bạn ; bạn có thể sử dụng các công cụ và thư viện khác nhau để quản lý tiêu đề cookie. Các công cụ này sẽ tạo ra các phản hồi HTTP gần giống như sau:

HTTP/2.0 200 OK
Content-type: text/html
Set-Cookie: alligator_name=barry
Set-Cookie: tasty_cookie=strawberry
... More http Content

Bạn có thể thêm thông tin vào cookie của bạn như ngày hết hạn và các tính năng bảo mật như lệnh Bảo mật và cờ HttpOnly .

Set-Cookie: cookie_name=cookie_value; Expires=Wed, 17 Sep 2021 07:00:00 GMT; Secure; HttpOnly

Cờ HttpOnly nghĩa là trình duyệt không thể đọc hoặc sửa đổi cookie. Và Bảo mật nghĩa là cookie chỉ có thể được chuyển qua HTTPS. Những điều này thực sự quan trọng để bảo vệ ứng dụng của bạn.

Với Javascript , việc quản lý Cookie phức tạp hơn một chút. Ta có một giao diện, document.cookie , lưu trữ cookie của ta và có thể được chỉ định lại. Ví dụ: trên một trang web đã cài đặt Google Analytics và trong console dành cho nhà phát triển, ta có thể thực hiện:

console.log(document.cookie)
// logs something like "_ga=GA1.3.210706468.1583989741; _gid=GA1.3.1734708005.1583989741"

// This equal sign does not work as you expect
document.cookie = "alligator=alligator_cookie_content;"
console.log(document.cookie)
// logs "_ga=GA1.3.210706468.1583989741; _gid=GA1.3.1734708005.1583989741; alligator=alligator_cookie_content"
// Notice that the previous piece of code appends the new cookie we created

// A rough implementation of a cookie interface could look like this:
const createCookie = (name, value) => document.cookie = name + '=' + value + ';'
// For a real update we would first check if the cookie exists
const updateCookie = (name, value) => document.cookie = name + '=' + value + ';'
const deleteCookie = (name) => document.cookie = name + '=; Max-Age=-1;';

Các loại bánh quy

Cookie phiên

Cookie phiên thường đề cập đến một loại cookie tồn tại cho đến khi trình duyệt bị đóng. Để cài đặt cookie phiên, bạn chỉ cần KHÔNG chỉ định bất kỳ ngày hết hạn nào.

Ví dụ: bạn có thể lưu tên user của bạn trong cookie. Bất kỳ ai có quyền truy cập vào cookie sẽ có quyền truy cập vào tên của user . Vì nó nằm trong cookie nên ta không cần thêm nó vào yêu cầu của bạn .

Session cookies là một biểu thức khó hiểu. Cookie phiên cũng đề cập đến cookie mà bạn sử dụng để quản lý phiên. Cookie bị xóa khi trình duyệt đóng không phải là cookie duy nhất bạn có thể sử dụng để quản lý phiên.

Cookie liên tục không bị xóa bởi trình duyệt khi user đóng nó. Các cookie này có ngày hết hạn mà bạn có thể đặt trong server của bạn . Bạn có thể đặt cookie hết hạn sau một ngày hoặc mười năm.

Ta có thể phân biệt các cookie trên cùng một domain với các cookie đến từ các nhà cung cấp bên thứ ba. Ví dụ ta đã đưa ra trước đó với Google Analytics là một ví dụ về cookie của bên thứ ba. Cookie của bên thứ ba được dùng để theo dõi các hoạt động của user . Để đặt cookie của bên thứ ba, bạn phải đặt ';domain=thirdpartydomain.com' .

Cookie thường là tạm thời, vì vậy bạn có thể cần đặt ngày hết hạn chính xác. Bạn có hai chiến lược:

Sử dụng Expires và đặt ngày hết hạn cố định. Ngày sử dụng định dạng ngày HTTP: <day-name>, <day> <month> <year> <hour>:<minute>:<second> GMT . Vì vậy, ví dụ: nếu ta muốn cookie của bạn hết hạn vào ngày 17 tháng 9 năm 2020, ta có thể làm:

const jacksBirthday = new Date(2020, 8, 17);
document.cookie = 'jacksage=27; expires =' + jacksBirthday.toUTCString() + ';';

Sử dụng 'Max-Age' không được hỗ trợ bởi mọi trình duyệt. Nhưng đó là giải pháp tốt nhất. Nó buộc cookie hết hạn trong một khoảng thời gian nhất định (tính bằng giây) sau khi khách hàng nhận được nó:

// Expires after one day
const oneDayToSeconds = 24 * 60 * 60;
document.cookie =  'daily_cookie=session_identifierXYZ; max-age = ' + oneDayToSeconds + ';';

🍪 Đó là về nó! Tôi hy vọng bây giờ bạn có ý tưởng tốt hơn về cách sử dụng cookie ở phía client với JavaScript. Nếu bạn có câu hỏi nào, hãy hỏi ta trên Twitter. Lần tới, ta sẽ xem cách quản lý các phiên bằng cookie và Express.js.

Tags:

Các tin liên quan

Tham quan nhanh về date-fns, Thư viện ngày JavaScript đơn giản
2020-03-18
Phương thức getOwnPropertyDescriptors trong JavaScript
2020-03-12
Cây tìm kiếm nhị phân thông qua JavaScript
2020-03-03
Tree Traversal qua JavaScript
2020-03-02
Hiểu về Trình tạo trong JavaScript
2020-02-28
Triển khai Thành phần Tab từ Scratch trong Vanilla JavaScript
2020-02-24
Khám phá cây qua JavaScript
2020-02-23
Giới thiệu về danh sách được liên kết qua JavaScript - Phần 2: Triển khai
2020-02-23
Khám phá các và hàng đợi qua JavaScript
2020-02-23
Câu hỏi phỏng vấn JavaScript: Gotchas phổ biến
2020-02-21