Куки
Куки — короткий текст, который браузер добавляет к запросам подходящего сайта. Страница пишет theme=dark и показывает theme / dark; пароль и токен нельзя класть в доступные JavaScript куки.
Не web storage
localStorage хранил saved / lida / tea. Куки идут только с подходящими сайтом и путём, не на каждый сайт. document.cookie — строка с точками с запятой, не объект.
Настройка
Path=/ открывает theme на путях сайта. SameSite=Lax ограничивает межсайтовые случаи, а Secure отправляет только по HTTPS.
document.cookie = "theme=dark; Path=/; SameSite=Lax; Secure";
console.log(document.cookie);
В строке может быть несколько пар, поэтому не сравнивайте весь текст с theme=dark.
Чтение имени
Разделите по ;, найдите имя с = и декодируйте значение через decodeURIComponent.
function readCookie(name) {
const start = name + "=";
const pair = document.cookie
.split("; ")
.find((part) => part.startsWith(start));
return pair ? decodeURIComponent(pair.slice(start.length)) : null;
}
console.log(readCookie("theme"));
console.log(readCookie("drink"));
Получаются dark, затем null: drink не записан, а отсутствие имени не даёт ошибки.
Кодирование
; и = — синтаксис куки. Перед записью tea / regular примените encodeURIComponent.
Чтение вернёт tea / regular; необработанная точка с запятой начнёт новую часть.
📊 Cookie and localStorage
| Bedarf | Cookie | localStorage |
|---|---|---|
| Bei passenden Anfragen | oft ja | nein |
| Für Seiten-JavaScript lesbar | außer HttpOnly | ja |
| Kleine Präferenz | möglich | meist einfacher |
| Sensible Sitzungs-ID | Server: HttpOnly + Secure | nicht hier speichern |
Выбор
Ни куки, ни localStorage не защищают секрет от JavaScript, уже работающего на странице.
JavaScript не задаёт и не читает HttpOnly; сервер посылает его заголовком Set-Cookie.
<!DOCTYPE html>
<html>
<body>
<p id="line">…</p>
<script>
document.cookie = "theme=dark; Path=/; SameSite=Lax; Secure";
function readCookie(name) {
const start = name + "=";
const pair = document.cookie.split("; ")
.find((part) => part.startsWith(start));
return pair ? decodeURIComponent(pair.slice(start.length)) : null;
}
document.querySelector("#line").textContent =
"theme / " + readCookie("theme");
</script>
</body>
</html>
Строка
Страница сохраняет dark, читает theme и собирает надпись.
Надпись: theme / dark. По обычному HTTP Secure может не принять браузер; сайт использует HTTPS.
Практика
Запишите theme с Path=/, прочитайте drink, закодируйте tea / regular, назовите HttpOnly Secure SameSite и прочитайте строку.
Ошибки и итог
Не считайте куки объектом или сейфом. Чувствительный идентификатор сессии задаёт сервер: HttpOnly, Secure и SameSite.
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху