Tạo, đọc và xóa cookies trong JavaScript

Trong quá trình phát triển ứng dụng web, việc lưu trữ thông tin người dùng để ghi nhớ trạng thái, cá nhân hóa trải nghiệm hay duy trì phiên làm việc là điều vô cùng quan trọng. Một trong những cơ chế lưu trữ phổ biến nhất trên trình duyệt chính là cookie.Cookies là các đoạn dữ liệu nhỏ được lưu trữ trên trình duyệt, cho phép website "nhớ" người dùng giữa các lần truy cập khác nhau. Nhờ vào cookies, ứng dụng có thể nhận diện người dùng đã đăng nhập, lưu ngôn ngữ hiển thị yêu thích, hay thậm chí là ghi nhớ giỏ hàng tạm thời.

Trong JavaScript, mình có thể tạo, đọc và xóa cookies một cách trực tiếp bằng cách thao tác với thuộc tính document.cookie. Việc hiểu rõ cách sử dụng cookies giúp lập trình viên nâng cao trải nghiệm người dùng, đồng thời quản lý dữ liệu hiệu quả phía client. Bài viết này sẽ hướng dẫn bạn cách làm việc với cookies bằng JavaScript thông qua những ví dụ cụ thể, cùng với các lưu ý cần thiết về bảo mật và hiệu suất.

Giới thiệu về Cookies trong JavaScript

Cookies là gì?

Cookies là những tệp nhỏ (dạng văn bản) được lưu trữ trên trình duyệt của người dùng, chứa dữ liệu liên quan đến phiên làm việc hoặc hành vi người dùng. Chúng được gửi từ server về client thông qua tiêu đề HTTP, hoặc được tạo thông qua JavaScript phía client.

Vị trí lưu trữ và giới hạn cookies

• Mỗi cookie được gán cho một tên miền (domain) cụ thể và chỉ có thể được truy cập từ cùng tên miền đó.

• Dữ liệu cookie được lưu trực tiếp trong trình duyệt và được gửi kèm theo mỗi yêu cầu HTTP đến server.

Giới hạn của cookie:

• Dung lượng mỗi cookie ~4KB.

• Một tên miền thường bị giới hạn lưu trữ khoảng 20 – 50 cookies (tùy trình duyệt).

• Quá nhiều cookie hoặc cookie lớn sẽ ảnh hưởng đến tốc độ tải trang và hiệu suất truyền tải dữ liệu.

Vai trò của Cookies trong ứng dụng web

Cookies đóng vai trò quan trọng trong việc lưu trữ và duy trì thông tin người dùng:

• Lưu trạng thái đăng nhập: ghi nhớ người dùng đã đăng nhập qua nhiều phiên truy cập.

• Lưu ngôn ngữ, tùy chọn giao diện: cá nhân hóa trải nghiệm người dùng.

• Ghi nhớ giỏ hàng, sản phẩm vừa xem trong các trang thương mại điện tử.

• Theo dõi hành vi người dùng (phục vụ cho phân tích, marketing hoặc quảng cáo).

So sánh cookies với localStorage và sessionStorage

Ghi nhớ: Cookies thích hợp để lưu dữ liệu cần gửi về server hoặc có hạn sử dụng ngắn, còn localStorage/sessionStorage phù hợp để lưu dữ liệu lớn và chỉ dùng trên client.

Tạo Cookie bằng JavaScript

Cú pháp tạo cookie

Bạn có thể tạo cookie trong JavaScript bằng cách gán giá trị cho thuộc tính document.cookie:

document.cookie = "username=John; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";

Khi bạn gán giá trị như trên, trình duyệt sẽ lưu cookie vào bộ nhớ với các thông tin kèm theo.

Các thuộc tính thường dùng khi tạo cookie

Ví dụ thực tế: Lưu tên người dùng sau khi đăng nhập

Giả sử sau khi người dùng đăng nhập thành công, bạn muốn lưu tên người dùng bằng cookie để cá nhân hóa nội dung:

function setUserCookie(username) {
  const expireDate = new Date();
  expireDate.setDate(expireDate.getDate() + 7); // Cookie tồn tại 7 ngày

  document.cookie = `username=${encodeURIComponent(username)}; expires=${expireDate.toUTCString()}; path=/; samesite=Lax`;
}

Ghi chú: Nên dùng encodeURIComponent() để đảm bảo tên người dùng không có ký tự đặc biệt gây lỗi cookie.

Đọc Cookie trong JavaScript

Truy xuất toàn bộ cookie hiện tại

Trong JavaScript, bạn có thể truy cập tất cả cookie đang hoạt động của trang web bằng cách đọc document.cookie:

console.log(document.cookie);

Ví dụ đầu ra có thể là:

username=John; theme=dark; token=abc123

Lưu ý: document.cookie trả về một chuỗi chứa tất cả cookie của domain hiện tại, cách nhau bởi dấu ; . Nó không trả về dưới dạng object, nên bạn cần xử lý để trích xuất dữ liệu.

Phân tích chuỗi cookie thành các cặp key-value

Bạn có thể phân tích chuỗi cookie thành một đối tượng dễ sử dụng hơn:

function parseCookies() {
  const cookies = {};
  const rawCookies = document.cookie.split(';');

  rawCookies.forEach(cookie => {
    const [key, value] = cookie.split('=');
    cookies[key.trim()] = decodeURIComponent(value);
  });

  return cookies;
}

console.log(parseCookies()); 
// Output: { username: "John", theme: "dark", token: "abc123" }

Viết hàm đọc cookie theo tên

Đôi khi bạn chỉ cần lấy một giá trị cụ thể. Dưới đây là một hàm đơn giản để đọc cookie theo tên:

function getCookie(name) {
  const nameEQ = name + "=";
  const cookies = document.cookie.split(';');

  for (let i = 0; i < cookies.length; i++) {
    let c = cookies[i].trim();
    if (c.indexOf(nameEQ) === 0) {
      return decodeURIComponent(c.substring(nameEQ.length));
    }
  }
  return null;
}

// Ví dụ sử dụng
console.log(getCookie("username")); // "John"

Hàm này sẽ giúp bạn tìm chính xác cookie có name mong muốn và trả về giá trị tương ứng. Nếu không tìm thấy, nó sẽ trả về null.

Xóa Cookie trong JavaScript

Cách xóa cookie

Trong JavaScript, không có phương thức trực tiếp để "xóa" cookie, nhưng bạn có thể xóa thủ công bằng cách ghi đè lại cookie cũ và đặt thời gian hết hạn (expires) về quá khứ, ví dụ:

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

Trong ví dụ trên, cookie username sẽ bị xóa vì nó đã hết hạn tính từ năm 1970.

Giải thích cơ chế

Khi trình duyệt thấy một cookie có thời gian expires đã qua, nó sẽ tự động loại bỏ cookie đó khỏi bộ nhớ.

Bạn không thể sử dụng delete như với object thông thường:

delete document.cookie.username; //  Không hoạt động

Lưu ý khi xóa cookie

path phải trùng khớp với path của cookie ban đầu (nếu bạn đã chỉ định khi tạo).

Ví dụ: Nếu cookie được tạo với path=/account, bạn cần phải xóa đúng theo path đó:

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

• Nếu có dùng domain khi tạo cookie, bạn cũng phải cung cấp cùng domain khi xóa.

• Nếu không chỉ rõ path hoặc chỉ sai path, cookie có thể không bị xóa và vẫn tồn tại trong phiên làm việc.

Viết hàm xóa cookie theo tên

function deleteCookie(name, path = "/") {
  document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=" + path + ";";
}

// Ví dụ sử dụng:
deleteCookie("username");

Ứng dụng thực tế của Cookies JavaScript

Cookies được sử dụng rộng rãi trong nhiều kịch bản thực tế nhằm nâng cao trải nghiệm người dùng và hỗ trợ các chức năng quan trọng trên website:

Ghi nhớ trạng thái đăng nhập

Cookies có thể lưu thông tin về phiên đăng nhập của người dùng, ví dụ như session ID hoặc access token (nếu được mã hóa và xử lý cẩn thận), giúp người dùng không cần đăng nhập lại mỗi khi tải lại trang hoặc truy cập vào các phần khác của website.

Lưu thông tin giỏ hàng tạm thời

Trong các trang thương mại điện tử, cookies được dùng để ghi nhớ sản phẩm mà người dùng đã thêm vào giỏ hàng, kể cả khi họ chưa đăng nhập. Điều này cho phép giỏ hàng được duy trì khi người dùng quay lại sau một thời gian ngắn.

Ghi nhớ ngôn ngữ hiển thị trang web

Một cookie đơn giản có thể lưu ngôn ngữ ưa thích của người dùng (ví dụ: lang=vi hoặc lang=en) để website hiển thị đúng ngôn ngữ khi người dùng truy cập lại.

Theo dõi hành vi người dùng

Cookies thường được dùng để lưu thông tin truy cập, số lần ghé thăm, thời gian ở lại trên trang, hoặc các hành vi như click, scroll,... nhằm phục vụ phân tích dữ liệu, cải thiện nội dung, và tối ưu hoá quảng cáo hiển thị.

Lưu ý và bảo mật khi dùng Cookies JavaScript

Mặc dù cookies tiện lợi và phổ biến, nhưng nếu không được sử dụng đúng cách, chúng có thể gây ra rủi ro bảo mật:

Không lưu thông tin nhạy cảm

Tránh lưu mật khẩu, token xác thực hoặc dữ liệu cá nhân quan trọng trực tiếp trong cookies. Những thông tin này nên được lưu trữ an toàn hơn, chẳng hạn như trong session phía server.

Sử dụng secure và HttpOnly

• secure: Chỉ truyền cookie qua kết nối HTTPS, giúp bảo vệ khỏi bị rò rỉ qua các kết nối không an toàn.

• HttpOnly: Ngăn chặn việc truy cập cookie từ JavaScript (qua document.cookie), giúp giảm rủi ro bị khai thác bởi các script độc hại (XSS).

Cẩn trọng với tấn công XSS và CSRF

Cookies có thể trở thành mục tiêu của:

• XSS (Cross-Site Scripting): Kẻ tấn công chèn mã JavaScript độc hại để đánh cắp cookie.

• CSRF (Cross-Site Request Forgery): Lợi dụng cookie còn hiệu lực để gửi yêu cầu giả mạo thay mặt người dùng.

Giải pháp bao gồm:

• Mã hóa cookie.

• Sử dụng token CSRF riêng biệt.

• Áp dụng các biện pháp xác thực mạnh hơn như SameSite cookies.

Hạn chế dung lượng

Cookies bị giới hạn về kích thước (~4KB mỗi cookie) và tổng số cookies mỗi domain (~20 cookies tùy trình duyệt). Việc lạm dụng cookies sẽ ảnh hưởng đến hiệu suất tải trang và gây khó khăn trong quản lý.

Kết bài

Cookies trong JavaScript là một công cụ đơn giản nhưng vô cùng hữu ích để lưu trữ dữ liệu phía client, giúp nâng cao trải nghiệm người dùng và hỗ trợ nhiều tính năng thiết yếu như ghi nhớ đăng nhập, lưu trạng thái trang, hoặc cá nhân hóa nội dung. Tuy nhiên, việc sử dụng cookies cần được thực hiện một cách cẩn thận, đặc biệt là về mặt bảo mật và quyền riêng tư người dùng.

Khi hiểu rõ cách tạo, đọc, và xóa cookies cũng như áp dụng đúng trong từng hoàn cảnh cụ thể, bạn sẽ có thể xây dựng các ứng dụng web linh hoạt, thân thiện hơn và an toàn hơn. Đừng quên kết hợp cookies với các phương pháp lưu trữ khác như localStorage, sessionStorage hoặc sử dụng session phía server để tối ưu hiệu quả quản lý dữ liệu.