5.1 Основні властивості cookies
Cookies — це невеликі фрагменти даних, які веб-сайти можуть зберігати на стороні клієнта (у браузері користувача). Вони з'явилися за 20 років до localStorage і весь цей час допомагали виконувати їх функції. Навіть зараз вони часто використовуються для збереження інформації про стан сесії, налаштування користувача, трекінгу та інших завдань.
Основні властивості cookies:
- Ім'я та значення (name=value): ключ-значення, яке зберігає дані.
- Домен і шлях (domain, path): визначають, до яких URL-адрес і доменів cookies застосовні.
- Час життя (expires, max-age): визначає, коли cookies закінчується і видаляється.
- Безпека (secure, HttpOnly): вказує, як і коли cookies можна передавати.
Встановлення cookies
Cookies можуть бути встановлені за допомогою JavaScript або серверного коду. У JavaScript для цього використовується властивість document.cookie.
Приклад встановлення cookies з JavaScript:
document.cookie = "username=JohnDoe";
Додаткові параметри cookies:
- expires: вказує дату закінчення терміну дії cookies. Після цієї дати cookies буде видалено.
- path: визначає шлях, для якого cookies дійсні. Зазвичай використовується /, щоб зробити cookies доступними для всього сайту.
- domain: визначає домен, для якого cookies дійсні.
- secure: якщо встановлено, cookies будуть передаватися лише по HTTPS.
- HttpOnly: якщо встановлено, cookies не можуть бути доступні через JavaScript (лише серверною стороною).
Приклад встановлення cookies з додатковими параметрами:
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
5.2 Управління cookies
1. Читання cookies
Усі cookies для поточного документа зберігаються в одному довгому рядку у document.cookie. Щоб отримати значення cookies, необхідно розібрати цей рядок.
Приклад читання cookies:
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
return null;
}
// Отримання значення cookies "username"
const username = getCookie('username');
console.log(username); // Виведе: JohnDoe
2. Оновлення cookies
Щоб оновити значення cookies, достатньо встановити його знову з тим же ім'ям, але з новим значенням і параметрами.
Приклад оновлення cookies:
document.cookie = "username=JaneDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
3. Видалення cookies
Для видалення cookies необхідно встановити для нього термін дії, що минув.
Приклад видалення cookies:
// Встановлення терміну дії, що минув
document.cookie = "username=JohnDoe; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
5.3 Приклади роботи з cookies
Пояснення:
setCookie: встановлює cookies із заданим ім'ям, значенням і часом життя (у днях)getCookie: повертає значення cookies за заданим ім'ямdeleteCookie: видаляє cookies за заданим ім'ям
Приклад:
<!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" присвоєно значення "JohnDoe" на 7 днів');
}
function handleGetCookie() {
const cookieValue = getCookie('username');
if (cookieValue) {
alert('Cookie "username" має значення: ' + cookieValue);
} else {
alert('Cookie "username" не знайдено');
}
}
function handleDeleteCookie() {
deleteCookie('username');
alert('Cookie "username" видалено');
}
</script>
</body>
</html>
5.4 Встановлення cookie на стороні сервера
Розглянемо роботу з HttpOnly та Secure cookies на сервері (Node.js).
Приклад:
const express = require('express');
const app = express();
app.get('/setcookie', (req, res) => {
res.cookie('secureServerCookie', 'ServerJohnDoe', {
maxAge: 7 * 24 * 60 * 60 * 1000, // 7 днів
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');
});
Приклади використання cookies:
- Аутентифікація: cookies часто використовуються для зберігання сесійних токенів, які підтверджують користувача між запитами.
- Налаштування користувачів: cookies можуть зберігати налаштування користувача, такі як мова інтерфейсу або теми.
- Трекінг користувачів: cookies можуть використовуватися для відстеження поведінки користувачів на сайті для аналітики та персоналізації контенту.
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ