Получение, установка и удаление элементов

И localStorage, и sessionStorage предоставляют одинаковые четыре основных метода: getItem(key), setItem(key, value), removeItem(key) и clear(). Это простые хранилища пар «ключ — значение», реализованные браузером.

localStorage.setItem("theme", "dark") сохраняет строку под ключом "theme". И ключ, и значение должны быть строками — значения других типов перед сохранением неявно преобразуются в строки, что незаметно портит объекты и массивы.

Чтобы сохранить структурированные данные, сериализуйте их в формате JSON: localStorage.setItem("user", JSON.stringify(user)). Прочитать их обратно можно так: const user = JSON.parse(localStorage.getItem("user")). Всегда обрабатывайте parse в блоке перехвата ошибок на случай, если сохранённое значение имеет неверный формат.

getItem("missing") возвращает null, если ключ не существует, — никогда не undefined. Используйте оператор объединения с null для задания значения по умолчанию: const theme = localStorage.getItem("theme") ?? "light".

Также можно использовать скобочную и точечную нотацию: localStorage.theme = "dark" и localStorage["theme"]. Оба варианта работают, но скрывают намерение — предпочитайте явные вызовы методов, которые ясно показывают, что это постоянное хранилище, а не свойство объекта.

localStorage.removeItem("theme") удаляет один ключ. localStorage.clear() удаляет все ключи текущего источника. Полная очистка разрушительна — никогда не вызывайте её без веской причины: она удаляет данные, установленные каждым скриптом на странице.

Используйте localStorage.length и localStorage.key(index), чтобы перебрать все сохранённые ключи, или применяйте оператор расширения к Object.keys(localStorage). Это полезно при миграциях, отладке и очистке по префиксу, например при удалении всех ключей, начинающихся с "cache:".

Браузеры выделяют примерно от 5 до 10 MB для каждого источника. Превышение квоты вызывает ошибку QuotaExceededError. Оборачивайте setItem в конструкцию try/catch при сохранении потенциально больших значений, например кэша изображений или черновиков документов, чтобы ошибка не привела к сбою приложения.

Хранилище является общим для всего источника. Добавляйте к ключам префикс с названием приложения или функции (app:settings, cart:items), чтобы избежать конфликтов с другими скриптами, сторонними библиотеками и расширениями браузера, работающими в том же источнике.

API хранилища полностью синхронен — каждый вызов блокирует главный поток до завершения дискового ввода-вывода. Не сохраняйте очень большие двоичные объекты и не вызывайте setItem в тесных циклах; вместо этого объединяйте обновления в один сериализованный объект.

Одинаковый API, но разный срок действия. sessionStorage очищается при закрытии вкладки, а localStorage сохраняется после перезапуска браузера. Выбирайте sessionStorage для временного состояния мастера, а localStorage — для пользовательских настроек, которые должны сохраняться после перезагрузки.

Что возвращает localStorage.getItem("missing-key"), если этот ключ никогда не устанавливался?

getItem, setItem, removeItem и операция очистки — четыре основы веб-хранилища. Значения всегда являются строками, поэтому структурированные данные следует оборачивать в JSON. Учитывайте возврат null, ошибку QuotaExceededError и используйте пространства имён, чтобы совместно и без конфликтов использовать источник с другими скриптами.