Ответ
Web Storage API — это механизм хранения данных на стороне клиента (в браузере пользователя). Он предоставляет два основных объекта: localStorage и sessionStorage, которые работают по принципу ключ-значение.
1. localStorage
- Данные сохраняются бессрочно и не удаляются при закрытии браузера.
- Объем: обычно 5-10 МБ на домен.
- Доступен для всех вкладок и окон с одним origin (домен, протокол, порт).
// Запись данных
localStorage.setItem('username', 'john_doe');
localStorage.setItem('settings', JSON.stringify({ theme: 'dark' }));
// Чтение данных
const name = localStorage.getItem('username'); // 'john_doe'
const settings = JSON.parse(localStorage.getItem('settings'));
// Удаление данных
localStorage.removeItem('username');
// Очистка всего хранилища
localStorage.clear();2. sessionStorage
- Данные живут только в течение сессии (пока открыта вкладка/окно браузера).
- Объем аналогичен localStorage.
- Данные изолированы для каждой вкладки.
sessionStorage.setItem('tempData', '123');| Сравнение с Cookies: | Критерий | Web Storage | Cookies |
|---|---|---|---|
| Объем | ~5-10 МБ | ~4 КБ | |
| Отправка на сервер | Нет | Да, с каждым HTTP-запросом | |
| Срок жизни | Постоянно или сессия | Задается явно | |
| Доступ из JS | Полный | Полный (если не HttpOnly) |
Использование: сохранение настроек пользователя, кеширование данных приложения, токенов (с осторожностью).