5.1 Các thuộc tính chính của cookie
Cookie (cookies) là các đoạn dữ liệu nhỏ mà trang web có thể lưu trữ trên phía client (trong trình duyệt của người dùng). Chúng xuất hiện từ 20 năm trước localStorage và đã giúp thực hiện các chức năng của nó. Ngay cả bây giờ chúng thường được sử dụng để lưu trữ thông tin về trạng thái phiên, sở thích người dùng, theo dõi và các nhiệm vụ khác.
Các thuộc tính chính của cookie:
- Tên và giá trị (name=value): khóa-giá trị lưu trữ dữ liệu.
- Miền và đường dẫn (domain, path): xác định URL và miền mà cookie áp dụng.
- Thời gian sống (expires, max-age): xác định khi nào cookie hết hạn và bị xóa.
- Bảo mật (secure, HttpOnly): chỉ định cách và khi nào cookie có thể được truyền đi.
Thiết lập cookie
Cookie có thể được thiết lập bằng JavaScript hoặc mã server. Trong JavaScript, ta sử dụng thuộc tính document.cookie.
Ví dụ thiết lập cookie với JavaScript:
document.cookie = "username=JohnDoe";
Các tham số bổ sung của cookie:
- expires: chỉ định ngày hết hạn của cookie. Sau ngày này, cookie sẽ bị xóa.
- path: xác định đường dẫn mà cookie hợp lệ. Thường được sử dụng / để cookie có sẵn cho toàn bộ trang web.
- domain: xác định miền mà cookie hợp lệ.
- secure: nếu được thiết lập, cookie sẽ chỉ được truyền qua HTTPS.
- HttpOnly: nếu được thiết lập, cookie không thể truy cập thông qua JavaScript (chỉ trên phía server).
Ví dụ thiết lập cookie với các tham số bổ sung:
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
5.2 Quản lý cookie
1. Đọc cookie
Tất cả các cookie cho tài liệu hiện tại được lưu trữ trong một chuỗi dài trong document.cookie. Để lấy giá trị cookie, cần phải phân tích cú pháp chuỗi này.
Ví dụ đọc cookie:
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
return null;
}
// Lấy giá trị cookie "username"
const username = getCookie('username');
console.log(username); // Sẽ in ra: JohnDoe
2. Cập nhật cookie
Để cập nhật giá trị của cookie, chỉ cần thiết lập lại với cùng tên, nhưng với giá trị và tham số mới.
Ví dụ cập nhật cookie:
document.cookie = "username=JaneDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
3. Xóa cookie
Để xóa cookie, cần thiết lập cho nó thời hạn hiệu lực đã hết.
Ví dụ xóa cookie:
// Thiết lập thời hạn hiệu lực đã hết
document.cookie = "username=JohnDoe; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
5.3 Ví dụ làm việc với cookie
Giải thích:
setCookie: thiết lập cookie với tên, giá trị và thời gian sống (tính theo ngày) đã chogetCookie: trả về giá trị của cookie theo tên đã chodeleteCookie: xóa cookie theo tên đã cho
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Cookie Example</title>
</head>
<body>
<button onclick="handleSetCookie()">Set Cookie</button>
<button onclick="handleGetCookie()">Get Cookie</button>
<button onclick="handleDeleteCookie()">Delete Cookie</button>
<script>
function setCookie(name, value, days) {
let expires = "";
if (days) {
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
const nameEQ = name + "=";
const ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i].trim();
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function deleteCookie(name) {
document.cookie = name + '=; Max-Age=0; path=/';
}
function handleSetCookie() {
setCookie('username', 'JohnDoe', 7);
alert('Cookie "username" đã được gán giá trị "JohnDoe" trong 7 ngày');
}
function handleGetCookie() {
const cookieValue = getCookie('username');
if (cookieValue) {
alert('Cookie "username" có giá trị: ' + cookieValue);
} else {
alert('Cookie "username" không tìm thấy');
}
}
function handleDeleteCookie() {
deleteCookie('username');
alert('Cookie "username" đã được xóa');
}
</script>
</body>
</html>
5.4 Thiết lập cookie trên phía server
Hãy xem cách làm việc với HttpOnly và Secure cookie trên server (Node.js).
Ví dụ:
const express = require('express');
const app = express();
app.get('/setcookie', (req, res) => {
res.cookie('secureServerCookie', 'ServerJohnDoe', {
maxAge: 7 * 24 * 60 * 60 * 1000, // 7 ngày
httpOnly: true,
secure: true,
sameSite: 'strict'
});
res.send('Secure server cookie set');
});
app.get('/getcookie', (req, res) => {
const cookie = req.cookies.secureServerCookie;
res.send(`Cookie value: ${cookie}`);
});
app.listen(3000, () => {
console.log('Server running on port 3000');
});
Ví dụ sử dụng cookie:
- Xác thực: cookie thường được sử dụng để lưu trữ token phiên, xác thực người dùng giữa các yêu cầu.
- Sở thích người dùng: cookie có thể lưu trữ cài đặt người dùng như ngôn ngữ giao diện hoặc chủ đề.
- Theo dõi người dùng: cookie có thể được sử dụng để theo dõi hành vi của người dùng trên trang để phân tích và cá nhân hóa nội dung.
GO TO FULL VERSION