Блок 2 · Урок 2 из 5

Хранилище браузера: localStorage и куки

Как браузер хранит данные прямо на устройстве пользователя — так, что они переживают перезагрузку, но остаются только в этом браузере.

⏱ ≈ 8 минут 📦 данные на устройстве 🎯 цель: понять, что переживёт перезагрузку и почему вход «не виден» на другом устройстве

Зачем это вам

Это объясняет два «бага», которые на самом деле не баги. Первый: «обновил страницу — всё на месте». Значит, агент положил данные в хранилище браузера, а не только в оперативную память приложения. Второй: «на другом телефоне пусто». Значит, данные локальны на первом устройстве, а вы ждали серверного хранения. Зная разницу, вы формулируете задачу точно: «храни настройки локально» против «храни на сервере, чтобы данные были на всех устройствах».

Где живут данные

Браузер умеет хранить данные прямо на устройстве

Когда приложение закрыто, перезагружено или просто ждёт следующего дня — некоторые данные никуда не деваются. Они лежат в самом браузере, на устройстве пользователя.

Таких хранилищ несколько, и у каждого своя роль. Самое важное различие: одни данные никогда сами не уходят на сервер, а другие браузер автоматически прикладывает к каждому запросу — и именно это делает их незаменимыми для входа в систему.

Что Сколько живёт Уходит ли на сервер Для чего
localStorage Пока пользователь сам не очистит (или не сбросит браузер) Нет, никогда само Тема оформления, язык, черновики, настройки на этом устройстве
sessionStorage До закрытия вкладки Нет Временные данные в рамках одной сессии работы
Cookie (кука) До истечения срока или до закрытия браузера — зависит от настройки Да, автоматически с каждым запросом 1 «Запомнить» вошедшего пользователя, сессия входа
IndexedDB Пока пользователь сам не очистит Нет Большие объёмы данных: кэш, офлайн-режим

localStorage — это хранилище «ключ-значение» (пара «имя → данные»): просто, быстро, не требует базы. Браузеры отводят под него от 5 до 10 МБ1 — достаточно для настроек, но не для фото. На сервер эти данные никогда не уходят сами — только если вы явно отправите их в запросе.

Cookie — крошечный фрагмент данных, обычно до 4 КБ1. Браузер автоматически добавляет его к каждому запросу к серверу — пользователь ничего не делает, это происходит само. Именно поэтому куки используют для сессий: сервер выдаёт браузеру «пропуск», и при каждом следующем обращении браузер показывает его снова, а сервер «узнаёт» пользователя.

И важный момент про место хранения: всё это живёт на конкретном устройстве в конкретном браузере. На телефоне и ноутбуке — разные хранилища. В Chrome и Safari — разные. В режиме инкогнито — стирается при закрытии окна.

📌 Хранилище браузера — это про одно устройство пользователя. Чтобы данные были «везде и у всех» — нужен сервер или база данных.

Аналогия, которую можно пересказать

Личные вещи у пользователя дома

«Ящик стола дома»— localStorage: данные лежат у пользователя на устройстве, никто чужой их не видит, остаются после перезагрузки. Но они у него дома — в офисе (на другом устройстве) их нет.
«Стикер на мониторе»— sessionStorage: пропадает, как только закрыл вкладку. Удобно для временного, не нужного после выхода.
«Пропуск в кармане»— Cookie: пользователь автоматически показывает его «охраннику»-серверу при каждом входе — так сервер помнит, что этот человек уже залогинен.
«Другой дом / офис»— другое устройство или браузер: своих ящиков там нет, своих стикеров нет, пропуска может не быть — всё начинается заново.

Вывод: localStorage — личное и локальное, никуда само не уходит. Cookie — то, что браузер автоматически предъявляет серверу при каждом запросе, поэтому именно куки используют для «помнить вход».

Запомните одно

Один вопрос разделяет всё

Спросите себя: «Эти данные должны автоматически попадать на сервер при каждом запросе?»

Если да (вход, сессия пользователя) — это работа cookie. Если нет (тема оформления, черновик, настройки на этом устройстве) — localStorage.

А если нужно «видно на всех устройствах» — это не умеет ни localStorage, ни cookie. Это уже задача сервера и базы данных.

Что это даёт на практике

Фраза агента → что он имеет в виду

«Сохраним в localStorage»
Положу на устройство пользователя. Переживёт перезагрузку, но останется только в этом браузере — на сервер не уйдёт и на другом устройстве не появится.
«Используем cookie для сессии»
Выдам браузеру пропуск, который он будет автоматически показывать серверу при каждом запросе — так сервер будет помнить, что пользователь вошёл.
«Данные не синхронизируются между устройствами»
Они лежат в хранилище браузера — только на одном устройстве. Чтобы было «везде» — нужно хранить на сервере или в базе данных.
«Сделаем httpOnly cookie»
Пропуск, который скрипт на странице прочитать не может2 — им управляет только сервер. Это защита от кражи токена через вредоносный JavaScript.

localStorage — хранилище «ключ-значение» в браузере; переживает перезагрузку и закрытие, живёт на устройстве, на сервер само не отправляется.

sessionStorage — то же, что localStorage, но стирается при закрытии вкладки.

Cookie (кука) — маленький фрагмент данных (~4 КБ), который браузер автоматически прикладывает к каждому запросу к серверу; главное применение — узнавать вошедшего пользователя.

IndexedDB — встроенная в браузер база для больших объёмов данных: кэша, офлайн-данных приложений.

Проверьте себя

Четыре вопроса с мгновенной проверкой

1. Чем localStorage отличается от состояния (state)?

2. Зачем для «запомнить вход» используют именно куки, а не localStorage?

3. Пользователь вошёл на ноутбуке, на телефоне он не залогинен. Частая причина?

4. Что НЕ стоит хранить в обычном localStorage?

Куда мы идём

Программа курса — 7 блоков