К списку
Web-тестирование и DevToolsMiddleТехническое

Какова структура данных в Local Storage браузера?

Краткий ответ

Local Storage сохраняет данные в формате пар «ключ-значение», где оба элемента представлены строками. Это позволяет быстро получать и обновлять информацию по уникальному ключу.

Развёрнуто

Краткий ответ

Local Storage хранит информацию в виде строковых пар «ключ-значение». Оба компонента — ключ и значение — строго представлены как строки, что обеспечивает простоту доступа и управления данными.


Как это работает

В браузерах API localStorage предоставляет возможность сохранять данные локально в формате строковых пар ключ-значение. При записи данных все значения автоматически преобразуются в строки, даже если изначально передавался другой тип (например, число или объект). Чтобы сохранить сложные структуры данных, необходимо их сериализовать, например, в JSON.

Особенность Описание
Формат хранения Строки (string)
Доступ к данным По уникальному строковому ключу
Объем памяти Обычно около 5-10 МБ на домен

Пример

// Сохранение значения
localStorage.setItem('user', 'QA Engineer');

// Получение значения
const role = localStorage.getItem('user'); // 'QA Engineer'

// Сохранение объекта через JSON
const settings = { theme: 'dark', fontSize: 14 };
localStorage.setItem('settings', JSON.stringify(settings));

// Чтение и преобразование обратно в объект
const savedSettings = JSON.parse(localStorage.getItem('settings'));

В этом примере ключи и значения всегда строки, для объектов используется сериализация в JSON.

Что важно знать на собеседовании

  • Local Storage ограничен по объему и предназначен для хранения простых строковых данных.
  • При сохранении любых типов, кроме строк, данные автоматически приводятся к строковому виду.
  • Для сохранения сложных структур нужно применять сериализацию (например, JSON).
  • Данные в Local Storage сохраняются между сессиями и доступны только в том же домене.
  • По сравнению с cookies, Local Storage не отправляет данные на сервер при каждом запросе, что улучшает производительность.

Тема: Web-тестирование и DevTools | Уровень: middle