Cookie là một cơ chế cho phép máy chủ (server) gửi một lượng nhỏ dữ liệu tới máy khách (client) để trình duyệt lưu trữ lại. Dữ liệu này sẽ được trình duyệt giữ lại trong bộ nhớ hoặc ổ cứng và gửi ngược lại máy chủ trong các yêu cầu HTTP tiếp theo. Quá trình này thường được thực hiện thông qua header Set-Cookie trong phản hồi HTTP từ máy chủ.

Về mặt cấu trúc, Cookie được lưu trữ dưới dạng chuỗi các cặp khóa-giá trị (key=value), phân tách nhau bởi dấu chấm phẩy. Để xác định chính xác một Cookie, hệ thống dựa vào bộ ba: name (tên), domain (tên miền) và path (đường dẫn). Cookie tuân thủ chính sách cùng nguồn gốc (Same-Origin Policy), nghĩa là trình duyệt sẽ chỉ gửi cookie về đúng tên miền đã tạo ra nó và không thể chia sẻ cookie giữa các tên miền khác nhau.

Mặc định, vòng đời của một Cookie là kết thúc khi phiên làm việc của trình duyệt đóng lại (session cookie). Tuy nhiên, nhà phát triển có thể sử dụng thuộc tính expires hoặc max-age để thiết lập thời gian tồn tại cụ thể, giúp duy trì trạng thái đăng nhập của người dùng trong nhiều ngày.

Thao tác với Cookie bằng JavaScript

Trên trình duyệt, chúng ta có thể truy cập và chỉnh sửa Cookie thông qua thuộc tính document.cookie. Thuộc tính này trả về một chuỗi chứa tất cả các cookie hiện hữu của domain hiện tại.

Để việc quản lý cookie dễ dàng hơn, chúng ta thường đóng gói các thao tác thành các hàm tiện ích (utility functions) như tạo, đọc và xóa.

/**
 * Hàm thiết lập cookie với thời gian hết hạn tùy chọn
 * @param {string} key - Tên của cookie
 * @param {string} value - Giá trị cần lưu
 * @param {number} days - Số ngày tồn tại (nếu null thì là session cookie)
 */
function createCookie(key, value, days) {
    let expires = "";
    if (days) {
        const date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    // Sử dụng encodeURIComponent để tránh lỗi ký tự đặc biệt
    document.cookie = key + "=" + (encodeURIComponent(value) || "")  + expires + "; path=/";
}

/**
 * Hàm đọc giá trị của cookie dựa trên tên
 * @param {string} key 
 * @returns {string|null} Giá trị của cookie hoặc null nếu không tìm thấy
 */
function readCookie(key) {
    const keyEQ = key + "=";
    const cookies = document.cookie.split(';');
    for(let i = 0; i < cookies.length; i++) {
        let cookie = cookies[i];
        // Bỏ qua khoảng trắng ở đầu chuỗi
        while (cookie.charAt(0) === ' ') {
            cookie = cookie.substring(1, cookie.length);
        }
        if (cookie.indexOf(keyEQ) === 0) {
            return decodeURIComponent(cookie.substring(keyEQ.length, cookie.length));
        }
    }
    return null;
}

/**
 * Hàm xóa cookie bằng cách thiết lập thời gian hết hạn là quá khứ
 * @param {string} key 
 */
function eraseCookie(key) {    
    createCookie(key, "", -1);
}

Ứng dụng: Xây dựng tính năng "Nhớ tôi" (Remember Me)

Một trong các ứng dụng phổ biến nhất của Cookie là duy trì trạng thái đăng nhập. Ví dụ dưới đây mô phỏng một hệ thống đăng nhập đơn giản, trong đó người dùng có thể chọn tùy chọn "Ghi nhớ đăng nhập" trong 10 ngày.

HTML Structure:

<!-- Phần giao diện đăng nhập -->
<section id="login-section">
    <h2>Đăng nhập hệ thống</h2>
    <div class="form-group">
        <label>Tên người dùng:</label>
        <input type="text" id="username-input" placeholder="Nhập username">
    </div>
    <div class="form-group">
        <label>Mật khẩu:</label>
        <input type="password" id="password-input" placeholder="Nhập mật khẩu">
    </div>
    <div class="form-group">
        <label>
            <input type="checkbox" id="remember-check"> Ghi nhớ tôi (10 ngày)
        </label>
    </div>
    <button id="btn-login">Đăng nhập</button>
</section>

<!-- Phần giao diện sau khi đăng nhập -->
<section id="dashboard-section" style="display: none;">
    <h2 id="welcome-msg"></h2>
    <p>Chào mừng bạn quay trở lại.</p>
    <button id="btn-logout">Đăng xuất</button>
</section>

JavaScript Logic:

// Giả lập cơ sở dữ liệu người dùng
const MOCK_DB = [
    { user: 'admin', pass: 'admin123' },
    { user: 'user01', pass: 'password' },
    { user: 'guest', pass: '123456' }
];

// Các phần tử DOM
const loginSection = document.getElementById('login-section');
const dashboardSection = document.getElementById('dashboard-section');
const userInput = document.getElementById('username-input');
const passInput = document.getElementById('password-input');
const rememberCheck = document.getElementById('remember-check');
const welcomeMsg = document.getElementById('welcome-msg');

// Kiểm tra trạng thái đăng nhập khi tải trang
window.onload = function() {
    const savedUser = readCookie('current_user');
    if (savedUser) {
        showDashboard(savedUser);
    } else {
        showLoginForm();
    }
};

// Xử lý sự kiện đăng nhập
document.getElementById('btn-login').addEventListener('click', function() {
    const uName = userInput.value.trim();
    const uPass = passInput.value.trim();

    if (!uName || !uPass) {
        alert("Vui lòng nhập đầy đủ thông tin!");
        return;
    }

    // Tìm user trong danh sách giả lập
    const account = MOCK_DB.find(acc => acc.user === uName);

    if (account) {
        if (account.pass === uPass) {
            // Đăng nhập thành công
            if (rememberCheck.checked) {
                // Lưu cookie trong 10 ngày nếu chọn "Ghi nhớ tôi"
                createCookie('current_user', account.user, 10);
            } else {
                // Lưu cookie phiên (session)
                createCookie('current_user', account.user, null);
            }
            alert("Đăng nhập thành công!");
            showDashboard(account.user);
        } else {
            alert("Mật khẩu không chính xác.");
        }
    } else {
        alert("Tài khoản không tồn tại.");
    }
});

// Xử lý sự kiện đăng xuất
document.getElementById('btn-logout').addEventListener('click', function() {
    eraseCookie('current_user');
    showLoginForm();
});

// Hàm chuyển đổi giao diện
function showDashboard(username) {
    loginSection.style.display = 'none';
    dashboardSection.style.display = 'block';
    welcomeMsg.innerText = `Xin chào, ${username}!`;
}

function showLoginForm() {
    loginSection.style.display = 'block';
    dashboardSection.style.display = 'none';
    userInput.value = '';
    passInput.value = '';
    rememberCheck.checked = false;
}