JavaScript и cookies
В этой статье объясняются JavaScript и cookies.
Мы подробно объясним всё шаг за шагом: от основ cookies, чтения и записи, безопасности до практических примеров.
YouTube Video
javascript-cookie.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>JavaScript & HTML</title>
6 <style>
7 * {
8 box-sizing: border-box;
9 }
10
11 body {
12 margin: 0;
13 padding: 1em;
14 padding-bottom: 10em;
15 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16 background-color: #f7f9fc;
17 color: #333;
18 line-height: 1.6;
19 }
20
21 .container {
22 max-width: 800px;
23 margin: 0 auto;
24 padding: 1em;
25 background-color: #ffffff;
26 border: 1px solid #ccc;
27 border-radius: 10px;
28 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
29 }
30
31 .container-flex {
32 display: flex;
33 flex-wrap: wrap;
34 gap: 2em;
35 max-width: 1000px;
36 margin: 0 auto;
37 padding: 1em;
38 background-color: #ffffff;
39 border: 1px solid #ccc;
40 border-radius: 10px;
41 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
42 }
43
44 .left-column, .right-column {
45 flex: 1 1 200px;
46 min-width: 200px;
47 }
48
49 h1, h2 {
50 font-size: 1.2rem;
51 color: #007bff;
52 margin-top: 0.5em;
53 margin-bottom: 0.5em;
54 border-left: 5px solid #007bff;
55 padding-left: 0.6em;
56 background-color: #e9f2ff;
57 }
58
59 button {
60 display: block;
61 margin: 1em auto;
62 padding: 0.75em 1.5em;
63 font-size: 1rem;
64 background-color: #007bff;
65 color: white;
66 border: none;
67 border-radius: 6px;
68 cursor: pointer;
69 transition: background-color 0.3s ease;
70 }
71
72 button:hover {
73 background-color: #0056b3;
74 }
75
76 #output {
77 margin-top: 1em;
78 background-color: #1e1e1e;
79 color: #0f0;
80 padding: 1em;
81 border-radius: 8px;
82 min-height: 200px;
83 font-family: Consolas, monospace;
84 font-size: 0.95rem;
85 overflow-y: auto;
86 white-space: pre-wrap;
87 }
88
89 .highlight {
90 outline: 3px solid #ffc107; /* yellow border */
91 background-color: #fff8e1; /* soft yellow background */
92 transition: background-color 0.3s ease, outline 0.3s ease;
93 }
94
95 .active {
96 background-color: #28a745; /* green background */
97 color: #fff;
98 box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
99 transition: background-color 0.3s ease, box-shadow 0.3s ease;
100 }
101 </style>
102</head>
103<body>
104 <div class="container">
105 <h1>JavaScript Console</h1>
106 <button id="executeBtn">Execute</button>
107 <div id="output"></div>
108 </div>
109
110 <script>
111 // Override console.log to display messages in the #output element
112 (function () {
113 // Override console.log
114 const originalLog = console.log;
115 console.log = function (...args) {
116 originalLog.apply(console, args);
117 const message = document.createElement('div');
118 message.textContent = args.map(String).join(' ');
119 output.appendChild(message);
120 };
121
122 // Override console.error
123 const originalError = console.error;
124 console.error = function (...args) {
125 originalError.apply(console, args);
126 const message = document.createElement('div');
127 message.textContent = args.map(String).join(' ');
128 message.style.color = 'red'; // Color error messages red
129 output.appendChild(message);
130 };
131 })();
132
133 document.getElementById('executeBtn').addEventListener('click', () => {
134 // Prevent multiple loads
135 if (document.getElementById('externalScript')) return;
136
137 const script = document.createElement('script');
138 script.src = 'javascript-cookie.js';
139 script.id = 'externalScript';
140 //script.onload = () => console.log('javascript-cookie.js loaded and executed.');
141 //script.onerror = () => console.log('Failed to load javascript-cookie.js.');
142 document.body.appendChild(script);
143 });
144 </script>
145</body>
146</html>JavaScript и cookies
Cookie — это небольшие фрагменты данных, хранящиеся в браузере пользователя. Они в основном используются для следующих целей:.
- Аутентификация пользователя (поддержание состояния входа)
- Сохранение пользовательских настроек (язык, тема и т.д.)
- Отслеживание (история просмотров и т.д.)
В JavaScript вы можете читать и записывать cookies с помощью document.cookie.
Создание (запись) cookies
Cookies создаются с помощью следующего синтаксиса:.
1document.cookie = "username=JohnDoe";- Этот код сохраняет cookie с именем
"username=JohnDoe"в браузере.
Создание cookies с датой истечения срока действия
Для cookies можно установить дату истечения срока действия. Если дата истечения не установлена, cookie считается сеансовым и удаляется при закрытии браузера.
1const date = new Date();
2date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 days
3const cookieText = "username=JohnDoe; expires=" + date.toUTCString() + "; path=/; SameSite=None; Secure"
4document.cookie = cookieText;
5console.log(`Cookie Text : ${cookieText}`);
6console.log(`Cookie Value : ${document.cookie}`);- Атрибут
expiresуказывает дату истечения срока cookie в формате UTC. - Атрибут
pathуказывает путь, по которому cookie будет отправляться./означает весь сайт. - Если указать
SameSite=None, тоCookieбудет отправляться даже при кросс-сайтовых запросах. Однако в этом случае необходимо всегда указывать атрибутSecure. - Указание атрибута
Secureограничивает передачуCookieтолько по HTTPS, что повышает безопасность. - Обратившись к
document.cookie, можно получить все доступные для данной страницыCookieв виде строки. - С помощью
console.logможно проверить разницу между фактическими значениямиCookie, установленными в браузере, и значениями, которые можно получить.
Получение (чтение) cookies
Вы можете получить все cookies в виде строки с помощью document.cookie.
1const date = new Date();
2date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 days
3document.cookie = "theme=dark; expires=" + date.toUTCString() + "; path=/; SameSite=None; Secure"
4
5console.log(document.cookie);
6// Output: "username=JohnDoe; theme=dark"
- Возвращаемое значение
document.cookie— это строка, в которой всеCookieобъединены в формате 'key=value;'. - Удобно использовать функцию для разбора этой строки и извлечения нужного значения.
Функция для получения значения cookie
1function getCookie(name) {
2 const cookies = document.cookie.split('; ');
3 for (const cookie of cookies) {
4 const [key, value] = cookie.split('=');
5 if (key === name) {
6 return decodeURIComponent(value);
7 }
8 }
9 return null;
10}
11
12console.log(getCookie("username")); // "JohnDoe"
- Эта функция разделяет ключи и значения с помощью
split()и возвращает значение, если оно соответствует указанному ключу. - С помощью
decodeURIComponentможно правильно получить закодированные символы. - Если соответствующий ключ не существует, возвращается
null.
Удаление cookies
Cookie можно удалить, установив дату истечения в прошлое.
1document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; SameSite=None; Secure";
2
3console.log(document.cookie);
4// Output: "theme=dark"
- Если присвоить
usernameпустое значение и установить срок действия в прошлое,Cookieбудет удалена. - При удалении
Cookieнеобходимо также указать те же атрибутыpath,SameSiteиSecure, которые были заданы при её создании. - В этом примере
usernameудаляется, а другиеCookie, такие какtheme=dark, остаются.
Параметры cookies
Вы можете указать различные параметры для управления поведением cookie. Основные из них следующие:.
Указывает дату истечения срока cookie в формате UTC. Если не указано, cookie становится сеансовым и удаляется при закрытии браузера.
Указывает срок действия cookie в секундах. Этот параметр имеет приоритет над `expires`.
Указывает путь, для которого cookie будет отправляться. Например, если указать `/admin`, cookie будет отправляться только для страниц под этим путем.
Указывает домен, для которого cookie действителен. Обычно устанавливается для текущего домена, но можно применить ко всем поддоменам, например, `.example.com`.
Когда этот атрибут указан, cookie отправляется только через HTTPS. Для повышения безопасности всегда устанавливайте этот атрибут для конфиденциальной информации.
Управляет, будут ли cookies отправляться при кросс-доменных запросах. Можно указать одно из трех следующих значений:.
- `Strict`
Cookies отправляются только для запросов с того же сайта.
- `Lax`
Cookies отправляются при обычной навигации, но с некоторыми ограничениями.
- `None`
Cookies могут быть отправлены даже при кросс-доменных запросах. Однако также требуется атрибут `Secure`.
Пример: безопасный cookie
1document.cookie = "sessionId=abc123; secure; SameSite=Strict";- Если указать
secure, тоCookieбудет отправляться только через HTTPS. - Если указать
SameSite=Strict, тоCookieне будет отправляться при кросс-сайтовых запросах, что эффективно как мера против CSRF. - Такие защищённые атрибуты крайне важны для
Cookie, используемых для аутентификации или управления сессией.
Кодирование и декодирование
Поскольку значения cookie могут содержать специальные символы, безопаснее использовать encodeURIComponent.
1const date = new Date();
2date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 days
3
4const username = "JohnDoe";
5document.cookie =
6 "username=" + encodeURIComponent(username) +
7 "; max-age=604800; path=/; SameSite=None; Secure";
8
9console.log(decodeURIComponent(getCookie("username"))); // "JohnDoe"
- Используя
encodeURIComponent, можно безопасно сохранять вCookieпробелы, символы и т.д. - При чтении используйте
decodeURIComponent, чтобы получить исходную строку. - В этом примере используется
max-age=604800, чтобы установить срок действия на 7 дней (604800 секунд). Это способ указания срока действия cookie, аналогичныйexpires.max-ageможно указать в секундах, и это часто удобнее.
Практический пример: сохранение и загрузка темы
Ниже приведен пример сохранения выбранной пользователем темы в cookie и автоматического применения её при следующем посещении.
1function setTheme(theme) {
2 document.cookie =
3 "theme=" + encodeURIComponent(theme) +
4 "; max-age=604800; path=/; SameSite=None; Secure"; // 1 week
5 applyTheme(theme);
6}
7
8function applyTheme(theme) {
9 document.body.style.backgroundColor = theme === "dark" ? "#333" : "#fff";
10 document.body.style.color = theme === "dark" ? "#fff" : "#000";
11}
12
13function getCookie(name) {
14 const cookies = document.cookie.split('; ');
15 for (const cookie of cookies) {
16 const [key, value] = cookie.split('=');
17 if (key === name) {
18 return decodeURIComponent(value);
19 }
20 }
21 return null;
22}
23
24const savedTheme = getCookie("theme");
25if (savedTheme) {
26 applyTheme(savedTheme);
27}1<button onclick="setTheme('light')">Light</button>
2<button onclick="setTheme('dark')">Dark</button>- Функция
setThemeсохраняет выбранную тему вCookieи сразу же вызываетapplyThemeдля обновления экрана. - Функция
applyThemeизменяет цвет фона и текста элементаbodyв соответствии с темой. - В этом примере благодаря установке
max-age=604800выбранная тема сохраняется в течение недели. - Поскольку выбор пользователя сохраняется при повторном посещении страницы, это улучшает UX.
Ограничения и предостережения при использовании cookies
Обратите внимание на следующие моменты при использовании cookies:.
-
Ограничения по размеру Размер одного cookie ограничен примерно 4 КБ.
-
Ограничение на количество сохраняемых cookies В зависимости от браузера, вы можете сохранять около 20-50 cookie на домен.
-
Меры предосторожности безопасности Содержимое файлов cookie в основном сохраняется в виде обычного текста, поэтому оно не подходит для хранения конфиденциальной информации, такой как пароли.
-
Cookie, недоступные из JavaScript Cookie с атрибутом
HttpOnlyне могут быть прочитаны из JavaScript по соображениям безопасности.
Сервер и Cookie
1Set-Cookie: sessionId=abc123; HttpOnly; Secure; SameSite=StrictНекоторые атрибуты cookie, такие как HttpOnly, нельзя установить с помощью JavaScript. Они должны устанавливаться на стороне сервера.
Резюме
Работа с cookie с помощью JavaScript может улучшить пользовательский опыт и поддерживать состояние. Однако, пожалуйста, учитывайте следующие моменты для безопасного и правильного обращения с ними.
-
Сохраняйте только минимально необходимую информацию С точки зрения конфиденциальности и безопасности избегайте хранения личной или чувствительной информации и записывайте только необходимые данные.
-
Правильно настраивайте атрибуты безопасности Устанавливайте атрибуты, такие как
SecureиSameSite, чтобы предотвратить межсайтовые атаки, такие как XSS и CSRF. -
Кодирование и декодирование данных Используйте
encodeURIComponentиdecodeURIComponentдля безопасного хранения и чтения значений cookie, чтобы специальные символы и японские символы обрабатывались правильно.
Освоив правильное использование cookie, вы сможете создавать более продвинутые и безопасные веб-приложения.
Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.