5.1 Podstawowe właściwości cookies
Cookies — to małe fragmenty danych, które strony mogą zapisywać po stronie klienta (w przeglądarce użytkownika). Pojawiły się 20 lat przed localStorage i przez ten czas pomagały w realizacji jego funkcji. Nawet teraz są często używane do przechowywania informacji o stanie sesji, preferencjach użytkownika, śledzeniu i innych zadaniach.
Podstawowe właściwości cookies:
- Nazwa i wartość (name=value): klucz-wartość, który przechowuje dane.
- Domena i ścieżka (domain, path): określają, do których URL i domen stosowane są cookies.
- Czas życia (expires, max-age): określa, kiedy cookie wygasa i jest usuwane.
- Bezpieczeństwo (secure, HttpOnly): wskazuje, jak i kiedy cookies można przekazywać.
Ustawianie cookies
Cookies mogą być ustawiane za pomocą JavaScript lub kodu po stronie serwera. W JavaScript stosowane jest do tego właściwość document.cookie.
Przykład ustawienia cookies z JavaScript:
document.cookie = "username=JohnDoe";
Dodatkowe parametry cookies:
- expires: wskazuje datę wygaśnięcia cookies. Po tej dacie cookies zostanie usunięte.
- path: określa ścieżkę, dla której cookies są ważne. Zazwyczaj używa się /, aby cookies były dostępne dla całej strony.
- domain: określa domenę, dla której cookies są ważne.
- secure: jeśli ustawione, cookies będą przekazywane tylko przez HTTPS.
- HttpOnly: jeśli ustawione, cookies nie mogą być dostępne przez JavaScript (tylko po stronie serwera).
Przykład ustawienia cookies z dodatkowymi parametrami:
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
5.2 Zarządzanie cookies
1. Odczytywanie cookies
Wszystkie cookies dla bieżącego dokumentu są przechowywane w jednej długiej linii w document.cookie. Aby uzyskać wartość cookies, należy rozdzielić tę linię.
Przykład odczytu cookies:
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
return null;
}
// Otrzymanie wartości cookies "username"
const username = getCookie('username');
console.log(username); // Wyświetli: JohnDoe
2. Aktualizacja cookies
Aby zaktualizować wartość cookies, wystarczy je ponownie ustawić z tą samą nazwą, ale z nową wartością i parametrami.
Przykład aktualizacji cookies:
document.cookie = "username=JaneDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
3. Usuwanie cookies
Aby usunąć cookies, należy ustawić dla nich przeterminowaną datę ważności.
Przykład usuwania cookies:
// Ustawiamy przeterminowaną datę ważności
document.cookie = "username=JohnDoe; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
5.3 Przykłady pracy z cookies
Objaśnienie:
setCookie: ustawia cookies z podaną nazwą, wartością i czasem życia (w dniach)getCookie: zwraca wartość cookies o podanej nazwiedeleteCookie: usuwa cookies o podanej nazwie
Przykład:
<!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" otrzymało wartość "JohnDoe" na 7 dni');
}
function handleGetCookie() {
const cookieValue = getCookie('username');
if (cookieValue) {
alert('Cookie "username" ma wartość: ' + cookieValue);
} else {
alert('Cookie "username" nie znaleziono');
}
}
function handleDeleteCookie() {
deleteCookie('username');
alert('Cookie "username" zostało usunięte');
}
</script>
</body>
</html>
5.4 Ustawianie cookies po stronie serwera
Przykład pracy z HttpOnly i Secure cookies na serwerze (Node.js).
Przykład:
const express = require('express');
const app = express();
app.get('/setcookie', (req, res) => {
res.cookie('secureServerCookie', 'ServerJohnDoe', {
maxAge: 7 * 24 * 60 * 60 * 1000, // 7 dni
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');
});
Przykłady użycia cookies:
- Uwierzytelnianie: cookies są często używane do przechowywania tokenów sesji, które identyfikują użytkownika między żądaniami.
- Preferencje użytkowników: cookies mogą przechowywać ustawienia użytkowników, takie jak język interfejsu czy motywy.
- Śledzenie użytkowników: cookies mogą być używane do śledzenia zachowań użytkowników na stronie dla celów analitycznych i personalizacji treści.
GO TO FULL VERSION