Что такое Local Storage в веб-браузере и для чего он используется?

Ответ

Local Storage — это механизм клиентского хранилища, предоставляемый Web Storage API. Он позволяет веб-приложениям сохранять данные в виде пар ключ-значение непосредственно в браузере пользователя.

Ключевые характеристики:

  • Постоянство: Данные не имеют срока действия и сохраняются после закрытия браузера, перезагрузки ОС.
  • Объем: Ограничение ~5-10 МБ на домен (зависит от браузера).
  • Доступ: Данные доступны только для страниц с одного происхождения (origin) (протокол, домен, порт).
  • Формат данных: Хранит только строки. Для работы с объектами необходимо использовать JSON.stringify() и JSON.parse().
  • Отправка на сервер: Данные не отправляются автоматически с каждым HTTP-запросом (в отличие от cookies).

Основные методы:

// Запись данных
localStorage.setItem('userTheme', 'dark');
localStorage.setItem('userProfile', JSON.stringify({ name: 'Alice', id: 123 }));

// Чтение данных
const theme = localStorage.getItem('userTheme'); // 'dark'
const profile = JSON.parse(localStorage.getItem('userProfile')); // {name: 'Alice', id: 123}

// Удаление данных
localStorage.removeItem('userTheme');

// Полная очистка хранилища для текущего домена
localStorage.clear();

Типичные сценарии использования:

  • Сохранение непередаваемых токенов (например, refresh_token).
  • Кэширование данных приложения для офлайн-работы или ускорения загрузки.
  • Сохранение пользовательских настроек интерфейса (тема, язык, параметры отображения).

Важное предупреждение: Не следует хранить в Local Storage конфиденциальную информацию (пароли, персональные данные, платежные реквизиты), так как данные не шифруются и уязвимы для XSS-атак.

Ответ 18+ 🔞

А, Local Storage, блядь! Ну это ж та самая штука, где браузер твой, как старая бабушка в чулане, складывает всякий хлам, который ты ему подсунул. Типа «на, бабуль, подержи, мне завтра пригодится».

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

Что это за зверь такой:

  • На века: Засунул туда что-то — оно там и останется, пока ты сознательно не выкинешь или пользователь не почистит хранилище. Браузер закрыл, комп вырубил — похуй, данные на месте. Настоящая пещера с сокровищами, только вместо золота — строки, блядь.
  • Объём: Дают тебе, в среднем, 5-10 мегабайт. Не ахти, конечно, но пару настроек, токен и корзину интернет-магазина захуярить — хватит. Попробуй запихнуть фильм — получишь ошибку, как будто в узкие джинсы после праздников пытаешься влезть.
  • Своя территория: Данные привязаны к происхождению — протокол, домен, порт. Сайт https://pornhub.com не сможет, блядь, прочитать данные сайта https://bank.gov. И слава богу, а то был бы пиздец.
  • Только строки: Он тупой, как пробка. Хочешь сохранить объект или массив? Преврати это всё в строку через JSON.stringify(), а то получишь [object Object] и волнение ебать. Достаешь — обратно разворачивай через JSON.parse().
  • Не лезет в сеть: В отличие от куков, которые с каждым запросом, как назойливые тараканы, ползут на сервер, Local Storage сидит тихо в своей норе. Сервер о его существовании даже не узнает, если ты специально не отправишь.

Как этим пользоваться (основные приёмы):

// Запихнуть что-то
localStorage.setItem('userTheme', 'dark'); // Кладём строку
localStorage.setItem('userProfile', JSON.stringify({ name: 'Alice', id: 123 })); // Кладём объект, предварительно сделав из него строку

// Достать обратно
const theme = localStorage.getItem('userTheme'); // Достаём 'dark'
const profile = JSON.parse(localStorage.getItem('userProfile')); // Достаём строку, превращаем обратно в объект {name: 'Alice', id: 123}

// Выкинуть одну вещь
localStorage.removeItem('userTheme');

// Устроить тотальную зачистку своего чулана
localStorage.clear();

Куда это обычно сують:

  • Токены обновления (refresh_token). Тот, который для получения новых access-токенов. Access-токен — в оперативку, а этот — сюда, подальше.
  • Кэш данных приложения. Чтобы не дергать сервер каждый раз, можно часть данных тут припрятать. Открыл приложение — бац, а данные уже есть, быстро всё загрузилось. Магия, блядь.
  • Настройки пользователя. Тёмная тема, язык, раскладка интерфейса — идеально ложится сюда. Закрыл вкладку, вернулся через неделю — а тема всё ещё тёмная, красота.

А теперь, внимание, ёпта, самое главное предупреждение:
Нельзя, блядь, категорически нельзя хранить тут ничего секретного! Пароли, номера карт, паспортные данные — это пиздец, а не идея. Данные тут не шифруются. Если на твой сайт пролезет XSS-червяк (межсайтовый скриптинг), то он вычистит Local Storage, как банку сгущёнки. Храни тут только то, на что не жалко. Конфиденциальность — ноль ебать.