Как сохранять состояние в локальном хранилище (LocalStorage)

LocalStorage — это механизм веб-хранилища, доступный в браузерах, который позволяет сохранять данные в виде пар ключ-значение. Одной из ключевых особенностей LocalStorage является его способность хранить данные между сеансами: даже если пользователь закроет браузер или перезагрузит страницу, данные в LocalStorage остаются.

Преимущества LocalStorage:

1. Простота использования: API LocalStorage крайне прост, не требуется сложной настройки или специальных библиотек.
2. Персистентность данных: Данные сохраняются даже после перезагрузки страницы или закрытия браузера.
3. Кросс-доменное хранилище: Каждый домен имеет своё собственное хранилище, что обеспечивает безопасность данных.

Ограничения LocalStorage:

1. Размер: Обычно браузеры ограничивают объём данных в LocalStorage до 5-10 МБ.
2. Синхронность: Доступ к LocalStorage происходит синхронно, что может привести к проблемам с производительностью при работе с большими объёмами данных.
3. Безопасность: Данные хранятся в виде текста, поэтому важно быть осторожным и избегать хранения чувствительной информации, такой как пароли или токены доступа.

Основы работы с LocalStorage

Прежде чем начать использовать LocalStorage, давайте рассмотрим базовые команды для работы с ним:

Сохранение данных:

Чтобы сохранить данные в LocalStorage, используется метод setItem. Он принимает два аргумента: ключ и значение.

localStorage.setItem('username', 'JohnDoe');

В этом примере в LocalStorage будет сохранена пара ключ-значение: username и JohnDoe. Теперь это значение будет доступно до тех пор, пока пользователь не очистит хранилище или вы не удалите его программно.

Получение данных:

Чтобы получить данные из LocalStorage, используется метод getItem. Он принимает один аргумент — ключ, под которым сохранены данные.

const username = localStorage.getItem('username');

console.log(username); // 'JohnDoe'

Если данные по заданному ключу не найдены, метод вернёт null.

Удаление данных:

Для удаления данных можно использовать метод removeItem, передав ему ключ, который нужно удалить.

localStorage.removeItem('username');

Теперь данные под ключом username будут удалены.

Очистка хранилища:

Если нужно удалить все данные из LocalStorage, можно воспользоваться методом clear:

localStorage.clear();

Этот метод полностью очищает хранилище, удаляя все пары ключ-значение.

Сохранение состояния приложения

Теперь, когда мы знаем, как работать с LocalStorage, давайте рассмотрим, как можно сохранять состояние приложения. Представим, что у нас есть простое приложение, где пользователь может выбрать тему (светлую или тёмную), и мы хотим сохранить этот выбор в LocalStorage, чтобы при следующем визите пользователя он увидел ту же тему.

Пример сохранения темы в LocalStorage:

Сначала создадим функцию, которая будет сохранять выбор пользователя:

function saveThemePreference(theme) {

  localStorage.setItem('theme', theme);

}

Теперь создадим функцию, которая будет загружать тему из LocalStorage при загрузке страницы:

function loadThemePreference() {

  const theme = localStorage.getItem('theme');

  if (theme) {

    document.body.className = theme;

  }

}

Вызовем эту функцию при загрузке страницы, чтобы применить ранее сохранённую тему:

window.onload = function() {

  loadThemePreference();

};

Наконец, добавим возможность пользователю менять тему:

document.getElementById('themeSwitcher').addEventListener('click', function() {

  const currentTheme = document.body.className === 'dark' ? 'light' : 'dark';

  document.body.className = currentTheme;

  saveThemePreference(currentTheme);

});

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