localStorage: что это и как браузер сохраняет данные

Ты собрал «Змейку», научил змейку есть яблоки и даже выбил рекорд — 42 очка. Закрываешь вкладку, открываешь снова, а лучший результат сброшен. Почему? Потому что обычные переменные в коде живут только пока открыта страница. Как только вкладка закрылась, они умирают вместе с ней.

Решение — сохранить рекорд туда, где браузер хранит данные между сеансами. Для простых случаев в веб-приложениях используют localStorage. Это встроенное хранилище прямо в браузере: маленькое, удобное и не требующее сервера. Разберём, как оно устроено, где физически живут данные, какие у него ограничения и когда стоит переходить к настоящей базе данных.

Что такое localStorage простыми словами

localStorage — это хранилище «ключ — значение» внутри браузера. Представь себе небольшую кладовку с подписанными коробками: на каждой коробке написано имя, а внутри лежит содержимое. Хочешь сохранить рекорд — кладёшь в коробку с надписью snakeBestScore число 42. При следующем открытии игры берёшь это число обратно и показываешь на экране.

Технически localStorage — это часть веб-API, которое даёт JavaScript доступ к долговременному хранилищу в браузере. Работать с ним можно из обычного кода на странице:

// Положить значение
localStorage.setItem('snakeBestScore', '42');

// Достать значение
const record = localStorage.getItem('snakeBestScore');
console.log(record); // "42"

Всё, что туда кладётся, превращается в строку. Даже если сохранишь число, при извлечении оно вернётся как текст. Поэтому числа обычно преобразуют обратно через Number(), а объекты — через JSON.stringify() и JSON.parse().

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

Данные из localStorage хранятся на устройстве пользователя, в профиле конкретного браузера. Они не улетают в интернет, не пишутся на сервер курса и не попадают в облако. Если ты открыл игру в Chrome на своём ноутбуке — рекорд сохранится именно в этом Chrome на этом ноутбуке.

Это важно понимать: localStorage привязан к четырём вещам:

• Браузеру. Если открыть игру в Firefox, Safari или на телефоне, данных там не будет.
• Профилю браузера. У разных пользователей Windows или разных профилей Chrome свои отдельные «кладовки».
• Домену. Сайт example.com не может читать localStorage сайта skillmake.ru. Это ограничение безопасности называется Same-Origin Policy.
• Протоколу. Хранилище для http://skillmake.ru и https://skillmake.ru разделяется.

Так что когда в следующий раз откроешь «Змейку» в том же браузере на том же компьютере — рекорд будет на месте. Но если похвастаешься другу и дашь ему ссылку — у него игра начнётся с чистого листа, потому что его браузер хранит свои собственные данные.

Какие данные туда кладут

localStorage хорош для небольших простых вещей, которые не жалко потерять при смене устройства, но удобно иметь под рукой:

• лучший рекорд в «Змейке»;
• настройки интерфейса: тёмная тема, выбранный язык, размер шрифта;
• состояние простой формы, которую пользователь не дозаполнил;
• флаг «подсказка уже показывалась», чтобы не дёргать пользователя каждый раз;
• последний введённый логин для удобства, но никогда — пароли.

Последний пункт стоит повторить отдельно: localStorage не предназначен для паролей, токенов доступа и других секретов. Хранилище лежит в браузере в открытом виде, и любой скрипт на той же странице может его прочитать. Для авторизации и чувствительных данных используют другие механизмы: защищенные куки, sessionStorage или серверную сессию.

Лимиты и ограничения

У localStorage есть жёсткий потолок: обычно около 5–10 мегабайт на один домен. Точная цифра зависит от браузера, но порядок именно такой. Для рекорда из «Змейки», настроек темы и пары флагов этого более чем достаточно. Но если попытаться сохранить туда картинки, аудио или историю всех игр — место быстро кончится.

Когда лимит исчерпан, браузер выбросит ошибку, и новые данные не запишутся. Поэтому в localStorage не хранят:

• большие файлы: изображения, музыку, видео;
• историю действий пользователя за длительный период;
• данные других пользователей или публичные рейтинги;
• ничего, что нельзя потерять при очистке браузера.

Ещё одно ограничение — скорость. localStorage работает синхронно: пока он читает или пишет, выполнение кода останавливается. При небольших объёмах это не заметно, но при тысячах операций может подвисать интерфейс.

Когда данные пропадают

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

Уничтожаются данные в таких случаях:

• пользователь очистил кэш и данные сайта в настройках браузера;
• пользователь удалил историю вместе с cookie и данными сайтов;
• браузер сбросили до заводских настроек или переустановили;
• пользователь открыл сайт в приватном режиме — там localStorage тоже работает, но после закрытия окна всё стирается;
• разработчик явно удалил запись из кода через localStorage.removeItem('snakeBestScore') или localStorage.clear().

Если хочешь, чтобы рекорд пропадал вместе с вкладкой — например, для временной игровой сессии — используй sessionStorage. Он устроен почти так же, но живёт только до закрытия вкладки.

Чем localStorage отличается от базы данных

В Модуле 2 мы храним рекорд в браузере, потому что проще некуда. Но в Модуле 5 курс переходит к Supabase — настоящей базе данных на сервере. Почему нельзя обойтись localStorage для всего?

Получается, что localStorage — это личная записная книжка игрока. А база данных — это общий журнал рекордов, где видно лучших игроков курса, можно построить таблицу лидеров и защитить данные от подделки.

Когда проект растёт, localStorage остаётся полезен для локальных настроек и кэша, но вся важная информация переезжает в базу данных на сервер.

Как посмотреть localStorage в браузере

Проверить, что там лежит, можно без программирования. В Chrome, Firefox, Edge и Safari есть инструменты разработчика:

1. Открой страницу с игрой.
2. Нажми F12 или Ctrl+Shift+I (на macOS Cmd+Option+I).
3. Перейди во вкладку Application (Chrome/Edge) или Хранилище (Firefox).
4. В левом меню найди раздел Local Storage и выбери свой домен.
5. Справа увидишь таблицу ключей и значений.

Там можно вручную добавить, изменить или удалить запись. Это удобно для отладки: например, сразу задать snakeBestScore = 999 и проверить, как ведёт себя экран рекордов.

Можно открыть консоль во вкладке Console и поиграть командами:

localStorage.setItem('test', 'привет');
localStorage.getItem('test'); // "привет"
localStorage.removeItem('test');

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

Заключение

localStorage — это самый простой способ заставить браузер помнить что-то между визитами. В «Змейке» он отлично подходит для рекорда: один раз сохранил — и при каждом открытии игры игрок видит свой лучший результат.

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

А пока достаточно запомнить главное: localStorage — это персональная полочка браузера для мелких данных. Используй её для настроек и локального рекорда, не храни там пароли и не пытайся засунуть туда весь мир.