Как работать с localStorage?

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

Для записи данных в хранилище используется метод localStorage.setItem(key, value), где оба аргумента обязательно должны быть строками. Чтобы прочитать сохраненные данные, применяется метод localStorage.getItem(key, value), который возвращает строку со значением или null, если указанный ключ отсутствует в базе. Удаление конкретного элемента осуществляется с помощью метода localStorage.removeItem(key), а если требуется полностью очистить всё хранилище для данного домена, используется метод localStorage.clear(), который удаляет абсолютно все сохраненные пары ключ-значение.

Важнейшей технической особенностью localStorage является то, что он работает исключительно со строками. Если вы попытаетесь записать в него объект, массив или булево значение, JavaScript автоматически преобразует его в строку "[object Object]", потеряв все исходные данные. Чтобы успешно сохранять сложные структуры данных, такие как массивы объектов или пользовательские настройки, перед записью необходимо сериализовать их в формат JSON с помощью метода JSON.stringify(data), а при чтении — обратно десериализовать с помощью JSON.parse(savedData).

Объем памяти localStorage обычно составляет около 5–10 мегабайт на один домен, чего с избытком хватает для текстовых настроек, токенов авторизации и черновиков постов. Все операции с хранилищем происходят синхронно в главном потоке выполнения, поэтому не стоит злоупотреблять сохранением слишком больших объемов данных, чтобы избежать возможных задержек в отрисовке интерфейса.