10. Локальное хранилище

Что такое локальное хранилище

Локальное хранилище (localStorage) — это способ сохранять данные прямо в браузере пользователя. В отличие от куки, данные не отправляются на сервер и не исчезают после перезагрузки страницы.

Представь, что localStorage — это как маленький сейф в браузере. Ты можешь положить туда данные, закрыть, и они останутся даже после закрытия вкладки.

Основные особенности

• Хранит данные в формате ключ → значение.
• Максимальный объём — около 5 МБ.
• Данные не удаляются при перезагрузке браузера.
• Работает только в том же домене (https://example.com не видит данные другого сайта).

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

• setItem(key, value) — сохранить значение.
• getItem(key) — получить значение по ключу.
• removeItem(key) — удалить значение по ключу.
• clear() — очистить всё хранилище.

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

// Сохранение
localStorage.setItem('username', 'Анна');
// Получение
let name = localStorage.getItem('username');
console.log(name); // Анна
// Удаление
localStorage.removeItem('username');
// Очистка всего хранилища
localStorage.clear();

localStorage хранит только строки

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

let user = {
  name: 'Иван',
  age: 25
};
localStorage.setItem('user', JSON.stringify(user));
let data = JSON.parse(localStorage.getItem('user'));
console.log(data.name); // Иван

Практический пример: счётчик посещений

let count = localStorage.getItem('visits');
if (!count) {
  count = 1;
} else {
  count = parseInt(count) + 1;
}
localStorage.setItem('visits', count);
document.body.innerHTML = `<h3>Вы посещали эту страницу ${count} раз.</h3>`;

Разбор примера

• При первой загрузке значение отсутствует, поэтому устанавливается 1.
• При последующих загрузках значение увеличивается на 1.
• Результат сохраняется и виден даже после перезапуска браузера.

Пример: сохранение темы сайта

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

```html <button id="toggleTheme">Переключить тему</button> ```

let btn = document.querySelector('#toggleTheme');
let currentTheme = localStorage.getItem('theme') || 'light';
setTheme(currentTheme);
btn.addEventListener('click', () => {
  currentTheme = (currentTheme === 'light') ? 'dark' : 'light';
  setTheme(currentTheme);
  localStorage.setItem('theme', currentTheme);
});
function setTheme(theme) {
  document.body.style.background = (theme === 'dark') ? '#222' : '#fff';
  document.body.style.color = (theme === 'dark') ? '#fff' : '#000';
}

Как это работает

• При нажатии на кнопку тема меняется и сохраняется в localStorage.
• При следующем заходе сайт загружает последнюю выбранную тему.

sessionStorage — временное хранилище

sessionStorage работает так же, как localStorage, но данные хранятся только до закрытия вкладки.

sessionStorage.setItem('sessionUser', 'Гость');
console.log(sessionStorage.getItem('sessionUser'));
// После закрытия вкладки данные исчезнут

Мини-практика

• Создайте форму с полем "Имя". Сохраняйте введённое имя в localStorage при отправке формы.
• При перезагрузке страницы выводите сообщение: «Добро пожаловать, [имя]!».
• Добавьте кнопку «Очистить», чтобы сбрасывать сохранённые данные.

Пример решения

```html <form id="nameForm"> <input type="text" id="username" placeholder="Введите имя"> <button type="submit">Сохранить</button> </form> <p id="greeting"></p> <button id="clearBtn">Очистить</button> ```

let form = document.querySelector('#nameForm');
let input = document.querySelector('#username');
let greeting = document.querySelector('#greeting');
let clearBtn = document.querySelector('#clearBtn');
// Проверяем, есть ли сохранённое имя
if (localStorage.getItem('username')) {
  greeting.textContent = 'Добро пожаловать, ' + localStorage.getItem('username') + '!';
}
form.addEventListener('submit', (e) => {
  e.preventDefault();
  localStorage.setItem('username', input.value);
  greeting.textContent = 'Добро пожаловать, ' + input.value + '!';
  input.value = '';
});
clearBtn.addEventListener('click', () => {
  localStorage.removeItem('username');
  greeting.textContent = 'Имя очищено!';
});

Советы новичкам

• Не храните в localStorage пароли или личные данные — они не защищены.
• Используйте JSON для сложных данных (массивы, объекты).
• Перед сохранением очищайте данные с помощью `.trim()`, чтобы избежать ошибок.
• Используйте sessionStorage для временных данных, которые не нужны после закрытия вкладки.

Итоги урока

Теперь вы знаете:

• Как сохранять и получать данные из localStorage.
• Как хранить сложные структуры с помощью JSON.
• Разницу между localStorage и sessionStorage.
• Как применять localStorage для сохранения пользовательских настроек и информации.