Урок 28: Работа с LocalStorage и SessionStorage в JavaScript’е

Сегодня мы разберемся с тем, как работать с LocalStorage и SessionStorage в JavaScript. Это важная тема, которая позволит вам сохранять данные прямо в браузере пользователя. Это удобно для множества задач, от сохранения настроек до кэширования информации.

Зачем нужно хранить данные в браузере?

Представьте, что вы создаете веб-приложение, например, интернет-магазин или заметки. Вам нужно сохранять данные между обновлениями страницы или даже после закрытия браузера. Раньше для этого использовались куки (cookies), но у них есть ограничения: маленький объем (около 4 КБ) и необходимость отправлять их на сервер с каждым запросом. Современные браузеры предлагают более удобные инструменты LocalStorage и SessionStorage.

Эти технологии позволяют:

• Хранить данные на стороне клиента.
• Сохранять информацию даже после закрытия браузера (для LocalStorage).
• Работать с большими объемами данных (до 5–10 МБ в зависимости от браузера).

LocalStorage и SessionStorage: в чем разница?

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

Как работать с LocalStorage и SessionStorage?

Оба хранилища предоставляют одинаковые методы для работы. Давайте разберем их на примере LocalStorage. Для SessionStorage все аналогично, только вместо localStorage используется sessionStorage.

Основные методы:

1. Сохранение данных
   localStorage.setItem(key, value)
   Ключ и значение должны быть строками. Если нужно сохранить объект, его нужно преобразовать в JSON.
   localStorage.setItem('username', 'Максим');

2. Получение данных
   localStorage.getItem(key)
   Если ключ не существует, вернется null.
   const username = localStorage.getItem('username'); // 'Максим'

3. Удаление данных
   localStorage.removeItem(key)
   Удаляет конкретный ключ.
   localStorage.removeItem('username');

4. Очистка всего хранилища
   localStorage.clear()
   Удаляет все данные из LocalStorage.
   localStorage.clear();

Примеры использования

Пример 1: Сохранение и получение простых данных

// Сохраняем данные
localStorage.setItem('theme', 'dark');
localStorage.setItem('language', 'ru');

// Получаем данные
const theme = localStorage.getItem('theme'); // 'dark'
const language = localStorage.getItem('language'); // 'ru'

// Удаляем язык
localStorage.removeItem('language');

// Очищаем хранилище (осторожно!)
// localStorage.clear();

Пример 2: Работа с объектами

Поскольку LocalStorage хранит только строки, объекты нужно преобразовывать с помощью JSON.stringify() и JSON.parse().

const user = {
  name: 'Максим',
  age: 30,
  isAdmin: true
};

// Сохраняем объект
localStorage.setItem('user', JSON.stringify(user));

// Получаем объект
const savedUser = JSON.parse(localStorage.getItem('user'));
console.log(savedUser.name); // 'Максим'

Пример 3: Счетчик посещений

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

// Получаем текущее значение счетчика
let visitCount = localStorage.getItem('visitCount') || 0;

// Увеличиваем на 1 и сохраняем
visitCount++;
localStorage.setItem('visitCount', visitCount);

console.log(`Вы посетили страницу ${visitCount} раз`);

Практические задачи

Задача 1: Список дел

Создайте простой список дел, где задачи сохраняются в LocalStorage.
Решение:

<input type="text" id="taskInput" placeholder="Введите задачу">
<button onclick="addTask()">Добавить</button>
<ul id="taskList"></ul>

<script>
  // Загружаем задачи при загрузке страницы
  window.onload = () => {
    const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    tasks.forEach(task => addTaskToDOM(task));
  };

  function addTask() {
    const input = document.getElementById('taskInput');
    const taskText = input.value.trim();

    if (taskText) {
      // Добавляем задачу в DOM и LocalStorage
      addTaskToDOM(taskText);
      saveTask(taskText);
      input.value = '';
    }
  }

  function addTaskToDOM(taskText) {
    const li = document.createElement('li');
    li.textContent = taskText;
    document.getElementById('taskList').appendChild(li);
  }

  function saveTask(taskText) {
    const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    tasks.push(taskText);
    localStorage.setItem('tasks', JSON.stringify(tasks));
  }
</script>

Задача 2: Темная тема

Реализуйте переключение между темной и светлой темами с сохранением выбора в LocalStorage.

<button onclick="toggleTheme()">Сменить тему</button>

<script>
  // Проверяем сохраненную тему
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme) {
    document.body.className = savedTheme;
  }

  function toggleTheme() {
    document.body.classList.toggle('dark-theme');
    const theme = document.body.className || 'light-theme';
    localStorage.setItem('theme', theme);
  }
</script>

<style>
  .dark-theme {
    background: #333;
    color: white;
  }
</style>

Ограничения

1. Объем данных. Не храните большие объемы (более 5 МБ), чтобы не замедлять работу браузера.
2. Безопасность. Не храните пароли, токены и другую чувствительную информацию — LocalStorage уязвим для XSS-атак.
3. Синхронность. Все операции синхронные, что может блокировать основной поток при больших данных.

Итоги

• LocalStorage подходит для долгосрочного хранения данных.
• SessionStorage идеален для временных данных в рамках сессии.
• Всегда работайте с данными через методы setItem, getItem, removeItem.
• Не забывайте преобразовывать объекты в строки с помощью JSON.

Хотите изучить JavaScript глубже? Переходите к полному курсу по JavaScript для начинающих. Там вас ждут 30 уроков с практикой.