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+).
| Đặc điểm | Cookie | LocalStorage | SessionStorage |
| :— | :— | :— | :— |
| Dung lượng | 4KB | 5MB – 10MB | 5MB |
| Hết hạn | Tự chọn | Không bao giờ | Khi đóng Tab |
| Gửi lên Server | Có | Không | Không |
—
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!
Leave a comment