Web Storage API: localStorage и sessionStorage

Что такое Web Storage API и зачем он нужен? 🌐

Хранить данные в браузере — это как иметь суперспособность! Web Storage API даёт нам два инструмента: localStorage и sessionStorage. Они позволяют сохранять данные прямо в браузере пользователя, без необходимости подключать базы данных или серверы.

🔥 Ключевые отличия:

💡 Совет: Хотите сохранить настройки пользователя, например, тёмную тему? localStorage — ваш выбор! Нужно временно хранить данные формы? Используйте sessionStorage.

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

1. Сохраняем данные (setItem)

// Сохраняем строку
localStorage.setItem('username', 'Danila');  

// Сохраняем объект (нужен JSON.stringify)
const user = { name: 'Danila', age: 25 };
localStorage.setItem('user', JSON.stringify(user));  

2. Получаем данные (getItem)

const username = localStorage.getItem('username'); // "Danila"  

// Получаем объект (нужен JSON.parse)
const savedUser = localStorage.getItem('user');
const parsedUser = JSON.parse(savedUser); // { name: "Danila", age: 25 }  

3. Удаляем данные (removeItem, clear)

// Удаляем один ключ
localStorage.removeItem('username');  

// Полностью очищаем хранилище
localStorage.clear();  

⚠️ Важно: localStorage работает только со строками. Если нужно сохранить объект или массив — используйте JSON.stringify() при записи и JSON.parse() при чтении.

Работа с sessionStorage 🏷️

sessionStorage работает точно так же, как localStorage, но данные удаляются при закрытии вкладки.

// Сохраняем на время сессии
sessionStorage.setItem('token', 'abc123');  

// Получаем
const token = sessionStorage.getItem('token'); // "abc123"  

// Удаляем
sessionStorage.removeItem('token');  

Пример: Тёмная тема с localStorage 🌓

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

HTML

<button id="themeToggle">🌙 Переключить тему</button>  

JavaScript

const themeToggle = document.getElementById('themeToggle');  

// Проверяем сохранённую тему (если есть)
const savedTheme = localStorage.getItem('theme');  
if (savedTheme === 'dark') {  
  document.body.classList.add('dark-theme');  
}  

// Переключаем тему по клику  
themeToggle.addEventListener('click', () => {  
  document.body.classList.toggle('dark-theme');  

  // Сохраняем выбор в localStorage  
  const isDark = document.body.classList.contains('dark-theme');  
  localStorage.setItem('theme', isDark ? 'dark' : 'light');  
});  

Когда НЕ стоит использовать Web Storage? 🚫

❌ Критически важные данные (пароли, платежи) — храните их на сервере.
❌ Большие объёмы данных (более 5 МБ) — лучше IndexedDB.
❌ Чувствительная информация — данные в localStorage доступны через DevTools.

Проверь себя! 🧠

1. В чём главное отличие localStorage от sessionStorage?
2. Как сохранить объект { id: 1, name: "Test" } в localStorage?
3. Что произойдёт с данными sessionStorage после закрытия вкладки?

🔹 Ответы:
1. localStorage хранит данные навсегда, sessionStorage — только до закрытия вкладки.
2. localStorage.setItem('data', JSON.stringify({ id: 1, name: "Test" }));
3. Они удалятся.

Итоги 🎯

• localStorage — для долгосрочного хранения (например, настройки пользователя).
• sessionStorage — для временных данных (например, ввод формы).
• Данные хранятся в виде строк → используем JSON.stringify() и JSON.parse().

Теперь ты знаешь, как легко сохранять данные прямо в браузере! 🚀 Попробуй применить это в своём проекте — например, запомнить последний выбранный фильтр или тему сайта.