JavaScript Reference - Tập 10: Cookies và Storage - Quản lý dữ liệu Client

Table of contents

1. JavaScript Cookies

Cookies là những tệp văn bản nhỏ được trình duyệt lưu lại. Khi trình duyệt yêu cầu một trang web từ máy chủ, các cookies thuộc về trang đó sẽ được gửi kèm theo.

1.1. Tạo và Cập nhật Cookie

Chúng ta sử dụng thuộc tính document.cookie:

// Tạo cookie đơn giản (mất khi đóng trình duyệt)
document.cookie = "username=TuanNDA";

// Tạo cookie có ngày hết hạn và đường dẫn
document.cookie = "username=TuanNDA; expires=Thu, 31 Dec 2026 12:00:00 UTC; path=/";

1.2. Đọc và Xóa Cookie

• Đọc: let allCookies = document.cookie; (Trả về chuỗi chứa tất cả cookies).
• Xóa: Chỉ cần đặt ngày hết hạn (expires) về một thời điểm trong quá khứ.

2. Web Storage API (LocalStorage & SessionStorage)

Đây là chuẩn hiện đại, lưu trữ dữ liệu dưới dạng key-value với dung lượng lớn hơn nhiều so với Cookies (thường là 5MB+).

3. Các phương thức thao tác Web Storage

Cả localStorage và sessionStorage đều có chung các phương thức:

• setItem(key, value): Lưu dữ liệu.
• getItem(key): Lấy dữ liệu.
• removeItem(key): Xóa một mục cụ thể.
• clear(): Xóa toàn bộ kho lưu trữ.
• key(index): Lấy tên key tại vị trí index.

4. Ví dụ: Xây dựng hàm Helper cho Cookie

Vì document.cookie làm việc với chuỗi khá thô sơ, các lập trình viên thường tự viết hàm helper:

function setCookie(name, value, days) {
  const d = new Date();
  d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
  document.cookie = `${name}=${value};expires=${d.toUTCString()};path=/`;
}

Lời kết Tập 10

Làm chủ các cơ chế lưu trữ giúp bạn tạo ra những ứng dụng Web cá nhân hóa và chuyên nghiệp. Trong Tập 11, chúng ta sẽ khám phá hệ thống Global Functions & Errors để làm mượt mã nguồn và xử lý các tình huống bất ngờ.

Hẹn gặp lại các bạn!