LocalStorage в JavaScript: руководство по хранению данных

LocalStorage — локальное хранилище данных браузера. Его преимущество — доступность данных после перезагрузки страницы, что делает его похожим на импровизированную базу данных, ограниченную одним браузером. LocalStorage работает только в браузере; в Node.js он недоступен.

Работа с LocalStorage

Для взаимодействия используется глобальный объект localStorage, доступный через window. Он предоставляет методы:

getItem(key): Получает значение по ключу. Возвращает null, если значение не найдено. Пример: localStorage.getItem(‘number’);
setItem(key, value): Записывает значение по ключу. LocalStorage работает только со строками. Числа автоматически преобразуются в строки с помощью toString(). Пример: localStorage.setItem(‘number’, ’42’);
removeItem(key): Удаляет значение по ключу. Пример: localStorage.removeItem(‘number’);
clear(): Очищает все данные.

LocalStorage ассоциируется с текущим доменом. Данные, записанные на одном домене, недоступны на другом. Содержимое можно проверить во вкладке «Application» инструментов разработчика.

Работа с объектами

LocalStorage хранит данные только как строки. Для работы с объектами используйте JSON.stringify() для преобразования объекта в строку JSON перед записью и JSON.parse() для обратного преобразования при чтении.

Пример:

let person = { name: 'Max', age: 20 };
localStorage.setItem('person', JSON.stringify(person));

let retrievedPerson = JSON.parse(localStorage.getItem('person'));
retrievedPerson.age = 21;

Без JSON.stringify() и JSON.parse() при сохранении объекта вы получите строку «[object Object]», а при попытке доступа к свойствам — ошибку undefined.

Синхронизация между вкладками

Для синхронизации данных между вкладками одного домена используйте событие storage:

window.addEventListener('storage', (event) => {
  console.log(event);
});

Событие срабатывает только при записи в LocalStorage из другой вкладки того же домена. Изменения в текущей вкладке не вызовут его. Событие event содержит информацию об изменениях, включая старое и новое значения, ключ и другие данные.

LocalStorage и Cookies

Два основных отличия:

Размер: LocalStorage имеет больший объем памяти (около 5 МБ) по сравнению с Cookies.
Безопасность: Cookies передаются на сервер с каждым запросом, что представляет угрозу безопасности. LocalStorage хранится только в браузере и не передается на сервер.