JavaScript và Cookies

Xin chào các pháp sư JavaScript tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của cookies. Không phải là loại cookies bạn nhúng vào sữa (dù tôi cũng không介意 có một chiếc ngay bây giờ), mà là loại kỹ thuật số 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 mặc áo厨师 ảo của bạn, và cùng bắt đầu nướng... tôi có nghĩa là, lập trình!

Cookies là gì?

Cookies là những mảnh dữ liệu nhỏ được lưu trữ trên máy tính của người dùng bởi các trang web họ truy cập. Hãy tưởng tượng chúng như những note kỹ thuật số nhỏ mà các trang web dán trên máy tính của bạn để nhớ về bạn. Những "note" này có thể chứa nhiều thông tin khác nhau, như sở thích của bạn, chi tiết đăng nhập, hoặc các mặt hàng trong giỏ hàng.

Khi tôi lần đầu tiên học về cookies, tôi tưởng tượng những精灵 máy tính nhỏ viết note và nhét chúng vào máy tính của tôi. Mặc dù cách hoạt động thực tế không phải như vậy, nhưng đó không phải là cách tồi tệ để hình dung khái niệm này!

Tại sao cần cookies?

Bạn có thể tự hỏi, "Tại sao các trang web không thể nhớ các thứ mà không cần những cookie này?" Hãy để tôi kể cho bạn một câu chuyện nhỏ.

Hãy tưởng tượng bạn đang ở một quán cà phê đông đúc. Bạn đặt một cốc cà phê và một sandwich, nhưng sau đó bạn cần đi vệ sinh. Khi bạn quay lại, barista biết đâu là订单 của bạn trong số những khách hàng khác? Đó là lúc cookies phát huy tác dụng trong thế giới kỹ thuật số.

Cookies cần thiết vì nhiều lý do:

1. Ghi nhớ sở thích người dùng
2. Giữ người dùng đăng nhập
3. Theo dõi các mặt hàng trong giỏ hàng
4. Cá nhân hóa trải nghiệm người dùng
5. Phân tích hành vi người dùng để cải thiện

Nếu không có cookies, mỗi khi bạn truy cập một trang web, nó sẽ giống như lần đầu tiên gặp nhau - không có ký ức về sở thích của bạn, không có đăng nhập đã lưu, không có mặt hàng trong giỏ hàng. Không thực sự tiện lợi, phải không?

Cách hoạt động?

Bây giờ, hãy nhìn vào bên trong và xem cookies kỹ thuật số thực sự hoạt động như thế nào. Đừng lo lắng; nó không phức tạp như bạn nghĩ!

Khi bạn truy cập một trang web, nó có thể gửi một cookie đến trình duyệt của bạn. Trình duyệt của bạn sau đó lưu cookie này trên máy tính của bạn. Lần sau khi bạn truy cập cùng một trang web, trình duyệt của bạn sẽ gửi cookie này trở lại cho trang web. Nó giống như một握手 bí mật giữa máy tính của bạn và trang web.

Dưới đây là một sơ đồ đơn giản về cách nó hoạt động:

Người dùng truy cập trang web
↓
Trang web gửi cookie
↓
Trình duyệt lưu cookie
↓
Người dùng truy cập lại trang web
↓
Trình duyệt gửi cookie
↓
Trang web nhận diện người dùng

Bây giờ chúng ta đã hiểu cơ bản, hãy c rolled up our sleeves and start working with cookies in JavaScript!

Đặt/Lưu cookies

Đặt một cookie giống như để lại một note cho sau này. Trong JavaScript, chúng ta sử dụng thuộc tính document.cookie để tạo một cookie. Dưới đây là cách bạn có thể làm điều đó:

document.cookie = "username=John Doe";

Hãy phân tích này:

• document.cookie là thuộc tính chúng ta sử dụng để tương tác với cookies.
• "username=John Doe" là cookie thực tế. Nó là một cặp key-value, trong đó username là key và John Doe là value.

Bạn cũng có thể đặt nhiều cookie:

document.cookie = "username=John Doe";
document.cookie = "age=30";
document.cookie = "city=New York";

Mỗi câu lệnh document.cookie tạo một cookie mới. Nó không ghi đè lên các cookie hiện có.

Đọc cookies

Đọc cookies giống như lục lọi qua những note bạn để lại cho mình. Dưới đây là cách bạn có thể đọc cookies:

let allCookies = document.cookie;
console.log(allCookies);

Điều này sẽ cho bạn tất cả các cookies dưới dạng một chuỗi dài. Nhưng thường thì bạn muốn lấy giá trị của một cookie cụ thể. Dưới đây là một hàm để làm điều đó:

function getCookie(name) {
let cookieArr = document.cookie.split(";");

for(let i = 0; i < cookieArr.length; i++) {
let cookiePair = cookieArr[i].split("=");

if(name == cookiePair[0].trim()) {
return decodeURIComponent(cookiePair[1]);
}
}

return null;
}

// Sử dụng
let username = getCookie("username");
console.log(username); // Xuất: John Doe

Hàm này chia chuỗi cookie, lặp qua từng cookie, và trả về giá trị nếu tìm thấy khớp.

Đặt ngày hết hạn cho cookies

Cookies giống như sữa - chúng có thể biến chất nếu để ngoài quá lâu. Mặc định, cookies hết hạn khi phiên duyệt kết thúc. Nhưng bạn có thể đặt một ngày hết hạn cụ thể:

let expiryDate = new Date();
expiryDate.setMonth(expiryDate.getMonth() + 1);

document.cookie = "username=John Doe; expires=" + expiryDate.toUTCString();

Cookie này sẽ hết hạn sau một tháng. Thuộc tính expires告诉 trình duyệt khi nào xóa cookie.

Xóa một cookie

Đôi khi, bạn cần bỏ đi một cookie. Để xóa một cookie, bạn đặt ngày hết hạn của nó thành một ngày đã qua:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

Điều này đặt giá trị của cookie thành trống và ngày hết hạn của nó thành một thời gian trong quá khứ, hiệu quả là xóa nó.

Cập nhật cookies

Cập nhật một cookie đơn giản như đặt nó lại với một giá trị mới:

document.cookie = "username=Jane Doe";

Nếu một cookie với tên "username" đã tồn tại, điều này sẽ cập nhật giá trị của nó. Nếu không tồn tại, nó sẽ tạo một cookie mới.

Bảng tóm tắt phương thức cookie

Dưới đây là bảng tóm tắt các phương thức chúng ta đã học:

Hành động	Phương thức
Đặt Cookie	document.cookie = "key=value";
Đọc tất cả Cookies	let allCookies = document.cookie;
Đọc Cookie cụ thể	Sử dụng hàm getCookie()
Đặt ngày hết hạn	document.cookie = "key=value; expires=date";
Xóa Cookie	Đặt ngày hết hạn thành ngày đã qua
Cập nhật Cookie	Đặt cookie lại với giá trị mới

Và thế là bạn đã có kiến thức để làm việc với cookies trong JavaScript! Nhớ rằng, với quyền lực lớn đi kèm với trách nhiệm lớn. Luôn tôn trọng quyền riêng tư của người dùng và minh bạch về việc sử dụng cookies của bạn.

Lần sau khi bạn đang duyệt web và một trang web nhớ về sở thích của bạn, bạn có thể mỉm cười biết điều và nghĩ, "Ah, cookies đang hoạt động!" Chúc các bạn lập trình vui vẻ, và hy vọng cookies kỹ thuật số của bạn luôn mới và cookies thực tế của bạn luôn ngon lành!

Credits: Image by storyset