Local Storage

Local Storage — это синхронное клиентское хранилище браузера, предназначенное для долговременного сохранения строковых данных объёмом до 5-10 МБ на один источник. Механизм реализует интерфейс `Storage` и доступен через глобальный объект `window.localStorage`^[2]. К ключевым характеристикам относятся:

• постоянство данных — записи сохраняются до тех пор, пока пользователь или скрипт их не удалит^[3];
• формат «ключ-значение», где и ключ, и значение являются строками; для хранения сложных типов данных используется сериализация в JSON^[4];
• привязка к политике одного источника, гарантирующая, что данные недоступны другим доменам^[1];
• увеличенный, по сравнению с cookie, объём хранилища (≈5-10 МБ);
• отсутствие передачи данных на сервер при каждом запросе, что снижает сетевую нагрузку^[5];
• синхронность всех операций чтения и записи.

• `setItem(key, value)` — сохраняет новую пару «ключ-значение» или обновляет существующую;
• `getItem(key)` — возвращает значение по указанному ключу либо `null`, если запись отсутствует^[6];
• `removeItem(key)` — удаляет запись по ключу;
• `clear()` — очищает все данные текущего источника;
• `key(index)` — возвращает имя ключа по его числовому индексу;
• `length` — свойство, содержащее количество записей в хранилище^[6].

При изменении localStorage в одном окне событие `storage` транслируется во все другие окна/вкладки того же источника. Объект `StorageEvent` предоставляет:

1. `key` — название изменённого ключа (или `null` при вызове `clear()`);
2. `oldValue` — предыдущее значение записи;
3. `newValue` — новое значение;
4. `url` — адрес документа, инициировавшего изменение;
5. `storageArea` — ссылка на объект `Storage` (`localStorage` или `sessionStorage`).

Работа с Local Storage строится по ряду последовательных этапов, каждый из которых обеспечивает определённую функцию хранения и обработки данных в браузере.

Данные записываются методом `setItem()`. Если требуется сохранить объект, его предварительно сериализуют:

localStorage.setItem('settings', JSON.stringify(obj));

Метод `getItem()` возвращает строковое представление значения, которое при необходимости десериализуют функцией `JSON.parse()`^[5].

Для точечного удаления используют `removeItem()`, для полной очистки — `clear()`.

Все операции блокируют основной поток JavaScript до завершения, что следует учитывать при работе с большими объёмами данных^[7].

Реализация зависит от браузера:

• Google Chrome сохраняет данные в файлах SQLite в каталоге профиля пользователя^[8];
• Mozilla Firefox использует базу `webappsstore.sqlite` в папке профиля^[9].

Приблизительная квота — 5 МБ на источник, в некоторых браузерах увеличенная до 10 МБ; при переполнении генерируется исключение `QuotaExceededError`.

• Долговременное хранение данных между сессиями пользователя^[3];
• больший объём по сравнению с cookie (≈5-10 МБ на домен)^[10];
• отсутствие передачи данных на сервер вместе с HTTP-запросами, что снижает трафик и ускоряет загрузку страниц;
• простой программный интерфейс на уровне JavaScript^[4];
• поддержка офлайн-режима и кэширования ответов API^[3].

• уязвимость к атакам XSS, поскольку данные доступны любому скрипту на странице;
• синхронность API может отрицательно влиять на производительность при больших объёмах данных;
• хранение только строковых значений: объекты требуют сериализации вручную;
• отсутствие автоматической синхронизации между устройствами пользователя^[11];
• данные удаляются при очистке пользователем кэша и других локальных данных.

• хранение пользовательских настроек (тема, язык, размер шрифта);
• кэширование часто запрашиваемых данных API и снижение количества сетевых вызовов;
• работа веб-приложений в офлайн-режиме и последующая синхронизация данных^[3];
• сохранение содержания «корзины» в интернет-магазинах;
• хранение промежуточного состояния ввода форм или прогресса в веб-играх^[12];
• базовая клиентская аналитика и A/B-тестирование.

Вкладки «Application» (Chrome) или «Storage» (Firefox) позволяют просматривать, изменять и удалять записи localStorage, а также выполнять операции через консоль JavaScript^[13].

• store.js — лёгкая обёртка над различными механизмами клиентского хранилища; автоматически сериализует объекты и обеспечивает кроссбраузерную совместимость^[14];
• localForage — асинхронная библиотека от Mozilla, использующая IndexedDB или WebSQL и предоставляющая API, схожий с Local Storage, но без блокировки основного потока;
• amplify.store — компонент библиотеки amplify.js, предлагающий единый интерфейс к localStorage, sessionStorage и cookie с автоматической JSON-сериализацией^[15];
• обзор других решений представлен в статье SitePoint.