Браузер и сервер обмениваются запросами, но каждый отдельный HTTP-запрос сам по себе независим и «не помнит» предыдущий. Тогда как сервер вообще «узнаёт», что вы уже вошли в систему, когда переходите со страницы на страницу? Должен быть механизм, который передаёт эту информацию от запроса к запросу.
Чему научишься за этот урок:
— объяснить, зачем нужны cookies, кэш, Local Storage и Session Storage и чем они отличаются друг от друга;
— различать два похожих, но разных бага с разлогином и правильно называть причину каждого;
— различать аутентификацию (кто ты) и авторизацию (что тебе можно).
Cookies
Cookies — небольшие данные, которые сервер просит браузер сохранить и присылать обратно с каждым следующим запросом на этот же сайт. Например, при входе в систему сервер может попросить браузер сохранить идентификатор сессии пользователя в cookie. Дальше браузер сам, без участия пользователя, прикладывает этот cookie к каждому следующему запросу — так сервер «узнаёт» вернувшегося пользователя.
Кэш
Кэш (cache) — сохранённые копии ресурсов (картинок, файлов стилей), чтобы не загружать их заново при каждом посещении. Кэш ускоряет работу сайта, но может показывать устаревшую версию ресурса, если она не обновилась вовремя, — отсюда классическая жалоба «у меня всё ещё старая версия, хотя у коллеги уже новая».
Local Storage и Session Storage
Local Storage — хранилище данных в браузере, привязанное к сайту, которое сохраняется даже после закрытия вкладки или всего браузера (пока его не удалят вручную или кодом).
Session Storage — то же самое по устройству, но данные пропадают, как только закрывается вкладка. В отличие от Local Storage, Session Storage не переживает ни закрытие вкладки, ни тем более закрытие браузера.
Два похожих, но разных бага с разлогином
У симптома «пользователя разлогинивает» есть два разных частых сценария, и важно не путать их причины — обычное обновление страницы (F5) НЕ очищает Session Storage: оно очищается только при закрытии вкладки или всего браузера.
Сценарий 1 — разлогинивает после закрытия и повторного открытия вкладки. Пользователь работает в личном кабинете, закрывает вкладку (или браузер), открывает сайт заново — и он снова не вошёл. Частая причина: данные сессии по ошибке положили в Session Storage вместо Cookies или Local Storage. Session Storage корректно переживает обновление страницы, но исчезает вместе с закрытой вкладкой — новой вкладке просто неоткуда взять данные сессии.
Сценарий 2 — разлогинивает при КАЖДОМ обновлении страницы (F5), даже без закрытия вкладки. Это другая причина: данные сессии вообще не сохранили ни в одно постоянное хранилище (ни в cookie, ни в Local Storage, ни даже в Session Storage), а держат только в переменной JavaScript в оперативной памяти вкладки. Обновление страницы полностью перезапускает выполнение JavaScript-кода — вся память скрипта обнуляется, а вместе с ней и токен сессии, который нигде не сохранился.
Аутентификация и авторизация
Аутентификация — проверка, кто ты: ввод логина и пароля подтверждает личность пользователя.
Авторизация — проверка, что тебе разрешено делать. Даже вошедшему (аутентифицированному) пользователю может быть не разрешён доступ к чужим данным или к админ-панели — это уже вопрос авторизации, а не аутентификации.
Хранилище | Живёт после закрытия вкладки | Живёт после закрытия браузера ------------------+------------------------------+------------------------------- Cookies | да (до истечения срока) | да (до истечения срока) Local Storage | да | да Session Storage | нет | нет Аутентификация -> "Кто ты?" (логин + пароль подтверждают личность) Авторизация -> "Что тебе можно?" (даже вошедшему может быть запрещён доступ к чужим данным)
Итог:
— cookies и хранилища браузера — механизмы, которые дают серверу «помнить» пользователя между независимыми запросами;
— Local Storage переживает закрытие вкладки и браузера, Session Storage переживает обновление страницы, но не переживает закрытие вкладки;
— разлогин после закрытия вкладки — сессия по ошибке в Session Storage вместо Cookies/Local Storage; разлогин на КАЖДОМ обновлении страницы — токен вообще нигде не сохранён, держится только в памяти JavaScript, которая обнуляется при перезагрузке;
— аутентификация — кто ты, авторизация — что тебе можно.
Контрольный вопрос. Что делают cookies?
Подсказка: Подумай про идентификатор сессии, который браузер сам прикладывает к каждому следующему запросу.
Онлайн-проверка ответа появится позже
Контрольный вопрос. Что такое кэш (cache) браузера?
Подсказка: Вспомни жалобу «у меня всё ещё старая версия, хотя у коллеги уже новая» — из-за чего она возникает.
Онлайн-проверка ответа появится позже
Контрольный вопрос. Чем Local Storage отличается от Session Storage по времени жизни данных?
Подсказка: Название одного из них намекает на то, что данные живут ровно один сеанс работы с вкладкой.
Онлайн-проверка ответа появится позже
Контрольный вопрос. Что проверяет аутентификация?
Подсказка: Это первый шаг при входе в систему, ещё до того, как речь заходит о правах доступа.
Онлайн-проверка ответа появится позже
Контрольный вопрос. Что проверяет авторизация?
Подсказка: Это про права доступа уже ПОСЛЕ того, как личность подтверждена.
Онлайн-проверка ответа появится позже
Контрольный вопрос. Что из перечисленного — типичные данные, которые сервер хранит в cookie пользователя?
Подсказка: Это компактное значение, по которому сервер узнаёт, какая именно сессия к нему обращается.
Онлайн-проверка ответа появится позже
Контрольный вопрос. Как называется хранилище данных в браузере, привязанное к сайту, где данные пропадают, как только закрывается вкладка? Ответь двумя английскими словами, как оно называется в уроке.
Подсказка: Оно ведёт себя иначе, чем Cookies и Local Storage: не переживает закрытие вкладки.
Онлайн-проверка ответа появится позже
Контрольный вопрос. Вошедший (аутентифицированный) пользователь пытается открыть чужой профиль или админ-панель, доступ к которым ему не разрешён. Какие из утверждений верны (выбери все подходящие)?
Выберите все верные варианты.
Подсказка: Личность пользователя уже подтверждена — вопрос дальше не в том, кто он, а в том, что ему можно.
Онлайн-проверка ответа появится позже
Контрольный вопрос. Ученик жалуется, что после того как дизайнер поменял цвет кнопки на сайте, у него на экране всё ещё старый цвет, хотя у коллеги — уже новый. Что скорее всего показывает ему устаревшую версию?
Подсказка: Речь про визуальный ресурс (стиль кнопки), который браузер обычно старается не загружать заново без необходимости.
Онлайн-проверка ответа появится позже
Задание. При входе в личный кабинет сервер просит браузер сохранить небольшие данные с идентификатором сессии и присылать их обратно с каждым следующим запросом на этот же сайт. Как называется этот механизм браузера? Ответь одним словом (по-английски, как в уроке).
Подсказка: Это первый из четырёх механизмов, разобранных в уроке — сервер просит браузер сохранить и присылать эти данные автоматически.
✅ Готово, если: ты ввёл(а) верный ответ, и онлайн-проверка его приняла.
Онлайн-проверка ответа появится позже
Задание. Личный кабинет ученика разлогинивает его каждый раз при обычном обновлении страницы (F5) — даже без закрытия вкладки. Данные сессии в этом случае вообще не сохранены ни в одно из браузерных хранилищ (ни Cookies, ни Local Storage, ни Session Storage) — токен держится только в переменной JavaScript. Что происходит с этой переменной при обновлении страницы и почему это приводит к разлогину? Ответь одним словосочетанием: что происходит с памятью JavaScript при перезагрузке страницы.
Подсказка: Обновление страницы полностью перезапускает выполнение JS-кода — подумай, что происходит с его памятью в этот момент.
✅ Готово, если: ты ввёл(а) верный ответ, и онлайн-проверка его приняла.
Онлайн-проверка ответа появится позже
Задание. Личный кабинет ученика разлогинивает его каждый раз, когда он ЗАКРЫВАЕТ вкладку и открывает сайт заново, — но обычное обновление страницы (F5) без закрытия вкладки работает нормально, разлогина не происходит. В какое из трёх хранилищ разработчики, скорее всего, по ошибке положили данные сессии? Ответь двумя английскими словами.
Подсказка: Подумай, какое из трёх хранилищ переживает обновление страницы, но не переживает закрытие вкладки.
✅ Готово, если: ты ввёл(а) верный ответ, и онлайн-проверка его приняла.
Онлайн-проверка ответа появится позже
Задание. Объясни в 2-3 предложениях, чем ПРИНЦИПИАЛЬНО отличаются причины двух похожих на первый взгляд багов: (1) «разлогинивает при закрытии вкладки, но не при обновлении страницы» и (2) «разлогинивает при КАЖДОМ обновлении страницы, даже без закрытия вкладки». Укажи, какое хранилище или его отсутствие стоит за каждым из двух багов.
Подсказка: Один баг связан с конкретным (но не тем) хранилищем браузера, другой — с отсутствием сохранения данных где бы то ни было.
✅ Готово, если: программа запускается без ошибок и выводит то, что просят в задании.
Онлайн-проверка ответа появится позже
Что дальше
Мы разобрались, как сервер «помнит» пользователя между независимыми запросами и чем отличаются аутентификация и авторизация. Тестировщик не пишет код на HTML, CSS и JS, но должен уметь их узнавать и читать ответы сервера в формате JSON — этому посвящён следующий урок.
