1 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Представим, что мы зашли в онлайн-магазин, ввели логин и пароль. Далее выбрали товары и добавили их в корзину. После этого нас отвлекли, мы выключили компьютер и ушли. Вернувшись, мы открыли браузер, а все товары находятся в корзине. При этом мы находимся под своей учетной записью.</p>
1
<p>Представим, что мы зашли в онлайн-магазин, ввели логин и пароль. Далее выбрали товары и добавили их в корзину. После этого нас отвлекли, мы выключили компьютер и ушли. Вернувшись, мы открыли браузер, а все товары находятся в корзине. При этом мы находимся под своей учетной записью.</p>
2
<p>Получается, магазин запомнил, что это мы добавляли товары в корзину, и нас не выкинуло из учетной записи. Всё это благодаря сессиям, которые помогают сайтам помнить нас и сохранять сделанные нами действия. В этом уроке мы познакомимся с этим механизмом, а также разберем самый распространенный вариант организации сессий - файлы cookies.</p>
2
<p>Получается, магазин запомнил, что это мы добавляли товары в корзину, и нас не выкинуло из учетной записи. Всё это благодаря сессиям, которые помогают сайтам помнить нас и сохранять сделанные нами действия. В этом уроке мы познакомимся с этим механизмом, а также разберем самый распространенный вариант организации сессий - файлы cookies.</p>
3
<h2>Что такое сессии</h2>
3
<h2>Что такое сессии</h2>
4
<p>Представим, что мы зашли на сайт без механизма сессии. Мы авторизовались на сайте, но после каждого перехода на новую страницу сайт "выкидывает" нас из аккаунта. Дело в том, что сайт не помнит, что мы это мы. Сайт не может определить этого. Поэтому необходимо снова войти в аккаунт, что неудобно, особенно при просмотре товаров в магазине.</p>
4
<p>Представим, что мы зашли на сайт без механизма сессии. Мы авторизовались на сайте, но после каждого перехода на новую страницу сайт "выкидывает" нас из аккаунта. Дело в том, что сайт не помнит, что мы это мы. Сайт не может определить этого. Поэтому необходимо снова войти в аккаунт, что неудобно, особенно при просмотре товаров в магазине.</p>
5
<p>Серверы не помнят ничего о пользователе из-за механизма работы протокола HTTP. Это непостоянное соединение, при котором один раз устанавливается связь с сервером. Каждый HTTP-запрос к серверу обрабатывается как новый - без привязки к пользователю. Сервер отвечает на запрос, и соединение закрывается.</p>
5
<p>Серверы не помнят ничего о пользователе из-за механизма работы протокола HTTP. Это непостоянное соединение, при котором один раз устанавливается связь с сервером. Каждый HTTP-запрос к серверу обрабатывается как новый - без привязки к пользователю. Сервер отвечает на запрос, и соединение закрывается.</p>
6
<p>Чтобы сервер запомнил пользователя, он должен передавать данные, которые однозначно идентифицируют его и сервер сможет определить связь этого запроса с предыдущими.</p>
6
<p>Чтобы сервер запомнил пользователя, он должен передавать данные, которые однозначно идентифицируют его и сервер сможет определить связь этого запроса с предыдущими.</p>
7
<p>При использовании сессий сайт может помнить о пользователе. Это используется для разных целей:</p>
7
<p>При использовании сессий сайт может помнить о пользователе. Это используется для разных целей:</p>
8
<ul><li>Сохранить введенные пользователем данные</li>
8
<ul><li>Сохранить введенные пользователем данные</li>
9
<li>Подстроить выдачу под интересы пользователя. Например, чтобы показывать объявления только из тех категорий, товары из которых мы смотрели ранее</li>
9
<li>Подстроить выдачу под интересы пользователя. Например, чтобы показывать объявления только из тех категорий, товары из которых мы смотрели ранее</li>
10
<li>Показывать персональные предложения в зависимости от действий на сайте</li>
10
<li>Показывать персональные предложения в зависимости от действий на сайте</li>
11
</ul><p>Мы постоянно видим персональную рекламу после поиска в гугле. Стоит один раз поискать товар, как все рекламные блоки пестрят объявлениями о тех товарах или услугах, которые мы искали. Это называется контекстная реклама и работает она, в том числе, благодаря сессиям.</p>
11
</ul><p>Мы постоянно видим персональную рекламу после поиска в гугле. Стоит один раз поискать товар, как все рекламные блоки пестрят объявлениями о тех товарах или услугах, которые мы искали. Это называется контекстная реклама и работает она, в том числе, благодаря сессиям.</p>
12
<p>Для такой связи используется механизм, который называется cookies. Он позволяет долгое время держать связь между конкретным браузером и сервером.</p>
12
<p>Для такой связи используется механизм, который называется cookies. Он позволяет долгое время держать связь между конкретным браузером и сервером.</p>
13
<h3>Что такое Cookies</h3>
13
<h3>Что такое Cookies</h3>
14
<p><strong>Cookie</strong>или<strong>куки</strong>- это небольшой файл данных, которые сервер посылает при первом взаимодействии с пользователем. Когда пользователь посылает запрос на сервер - файл с куками, который принадлежит сайту, - то он так же посылается на сервер:</p>
14
<p><strong>Cookie</strong>или<strong>куки</strong>- это небольшой файл данных, которые сервер посылает при первом взаимодействии с пользователем. Когда пользователь посылает запрос на сервер - файл с куками, который принадлежит сайту, - то он так же посылается на сервер:</p>
15
<p>По этим данным сервер узнает нас и персонализирует сайт под нас:</p>
15
<p>По этим данным сервер узнает нас и персонализирует сайт под нас:</p>
16
<p>Сервер помнит о том, что мы вводили свой логин и пароль, или показывает товары из тех категорий, которые мы недавно просматривали.</p>
16
<p>Сервер помнит о том, что мы вводили свой логин и пароль, или показывает товары из тех категорий, которые мы недавно просматривали.</p>
17
<h2>Какие виды сессий существуют</h2>
17
<h2>Какие виды сессий существуют</h2>
18
<p>Сессии делятся на два вида:</p>
18
<p>Сессии делятся на два вида:</p>
19
<ul><li>Временные</li>
19
<ul><li>Временные</li>
20
<li>Постоянные</li>
20
<li>Постоянные</li>
21
</ul><p><strong>Временная сессия</strong>существует только до момента закрытия вкладки. Такой эффект можно увидеть, если в браузере перейти в режим "Инкогнито". В этом режиме браузер хранит все действия до момента закрытия вкладки. Как только вкладка закрывается, то сайт перестанет помнить о том, что мы авторизовались, просматривали товары и так далее.</p>
21
</ul><p><strong>Временная сессия</strong>существует только до момента закрытия вкладки. Такой эффект можно увидеть, если в браузере перейти в режим "Инкогнито". В этом режиме браузер хранит все действия до момента закрытия вкладки. Как только вкладка закрывается, то сайт перестанет помнить о том, что мы авторизовались, просматривали товары и так далее.</p>
22
<p><strong>Постоянная сессия</strong>хранится на компьютере в виде куки и может быть использована даже после выключения устройства. Слово "постоянная" не совсем верное, так как куки хранятся определенное количество времени, которое задано в самой сессии.</p>
22
<p><strong>Постоянная сессия</strong>хранится на компьютере в виде куки и может быть использована даже после выключения устройства. Слово "постоянная" не совсем верное, так как куки хранятся определенное количество времени, которое задано в самой сессии.</p>
23
<p>Время, которое "живет" кука, определяется разработчиками и зависит от его задач. Посмотреть это время можно с помощью DevTools.</p>
23
<p>Время, которое "живет" кука, определяется разработчиками и зависит от его задач. Посмотреть это время можно с помощью DevTools.</p>
24
+
<h2>Как посмотреть сессии в DevTools</h2>
24
<p>DevTools позволяет посмотреть все куки, которые установленны для сайта. При тестировании это помогает узнать, какие данные сохраняются в куках и правильно ли они устанавливаются.</p>
25
<p>DevTools позволяет посмотреть все куки, которые установленны для сайта. При тестировании это помогает узнать, какие данные сохраняются в куках и правильно ли они устанавливаются.</p>
25
<p>Как посмотреть куки на примере браузера Firefox:</p>
26
<p>Как посмотреть куки на примере браузера Firefox:</p>
26
<ol><li>Открыть DevTools</li>
27
<ol><li>Открыть DevTools</li>
27
<li>Перейти во вкладку<em>Storage</em></li>
28
<li>Перейти во вкладку<em>Storage</em></li>
28
<li>Во вкладке Cookies выбрать текущий сайт</li>
29
<li>Во вкладке Cookies выбрать текущий сайт</li>
29
</ol><p>В этой вкладке можно увидеть все возможные куки, которые связаны с сайтом. В примере выше они связаны с сайтом Хекслета.</p>
30
</ol><p>В этой вкладке можно увидеть все возможные куки, которые связаны с сайтом. В примере выше они связаны с сайтом Хекслета.</p>
30
<p>Если кликнуть на любую строчку, то покажется информация про выбранную куку:</p>
31
<p>Если кликнуть на любую строчку, то покажется информация про выбранную куку:</p>
31
<p>Здесь 4 основных поля:</p>
32
<p>Здесь 4 основных поля:</p>
32
<ul><li>Название и значение Cookie</li>
33
<ul><li>Название и значение Cookie</li>
33
<li><strong>Created</strong>- дата и время установки куки</li>
34
<li><strong>Created</strong>- дата и время установки куки</li>
34
<li><strong>Domain</strong>- домен, для которого установлена кука</li>
35
<li><strong>Domain</strong>- домен, для которого установлена кука</li>
35
<li><strong>Expires / Max-Age</strong>- дата и время, для которых установлена кука</li>
36
<li><strong>Expires / Max-Age</strong>- дата и время, для которых установлена кука</li>
36
</ul><p>На скриншоте устанавливается кука с названием<em>previousUrl</em>, которая имеет значение<em>ru.hexlet.io%2Fprograms%2Ffrontend</em>. По названию понятно, что хранится значение последней страницы, на которой был пользователь. Cookie была установлена на полчаса для домена<em>ru.hexlet.io</em>.</p>
37
</ul><p>На скриншоте устанавливается кука с названием<em>previousUrl</em>, которая имеет значение<em>ru.hexlet.io%2Fprograms%2Ffrontend</em>. По названию понятно, что хранится значение последней страницы, на которой был пользователь. Cookie была установлена на полчаса для домена<em>ru.hexlet.io</em>.</p>
37
<p>С помощью этих данных можно протестировать, правильно ли устанавливается кука, как долго она "живет" и не происходит ли конфликта с другими куками. Эти данные определяются разработчиками или отделом маркетинга. Задача тестировщика - проверить корректность установки сессий и срок их жизни.</p>
38
<p>С помощью этих данных можно протестировать, правильно ли устанавливается кука, как долго она "живет" и не происходит ли конфликта с другими куками. Эти данные определяются разработчиками или отделом маркетинга. Задача тестировщика - проверить корректность установки сессий и срок их жизни.</p>
38
<h2>Выводы</h2>
39
<h2>Выводы</h2>
39
<p>В этом уроке мы узнали, как сайт помнит о пользователях. Такой механизм называется сессией и является идентификатором, который пересылается от сервера к пользователю и обратно.</p>
40
<p>В этом уроке мы узнали, как сайт помнит о пользователях. Такой механизм называется сессией и является идентификатором, который пересылается от сервера к пользователю и обратно.</p>
40
<p>Так сайт или приложения помнят последние действия пользователей, например, что он входил в свой личный кабинет и не "выкидывает" пользователя при переходе на новую страницу.</p>
41
<p>Так сайт или приложения помнят последние действия пользователей, например, что он входил в свой личный кабинет и не "выкидывает" пользователя при переходе на новую страницу.</p>
41
<p>Существует два типа сессий:</p>
42
<p>Существует два типа сессий:</p>
42
<ul><li>Временные. Они существуют до тех пор, пока пользователь не закроет браузер</li>
43
<ul><li>Временные. Они существуют до тех пор, пока пользователь не закроет браузер</li>
43
<li>Постоянные. Они хранятся в виде файлов Cookies, которые имеют свой срок службы</li>
44
<li>Постоянные. Они хранятся в виде файлов Cookies, которые имеют свой срок службы</li>
44
</ul>
45
</ul>