Ответ
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) |
Использование: сохранение настроек пользователя, кеширование данных приложения, токенов (с осторожностью).
Ответ 18+ 🔞
А, ну это про ту самую штуку, где браузер в своей памяти что-то прячет, да? Web Storage, блядь. Ну, в общем, представь, что у тебя есть два ящика в этом твоём браузере: один — на века, а второй — до первого чиха.
1. localStorage — твой личный склеп, ёпта Этот ящик, сука, не забывает нихуя. Закрыл браузер, выключил комп, прошло сто лет — открываешь, а там всё на месте лежит, как будто ты только вчера положил.
- Живёт: Пока ты сам не почистишь или пользователь не снесёт данные браузера. Фактически — вечно, блядь.
- Места: Ну, где-то 5-10 мегабайт на один сайт. Не айс, но для настроек и прочей хуйни — за глаза.
- Доступ: Откроешь сайт в десяти вкладках — во всех будет один и тот же
localStorage. Удобно, сука.
// Запихнул туда что-то
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 — одноразовый стаканчик А этот, блядь, живёт ровно до тех пор, пока ты не закроешь вкладку. Перезагрузил страницу — ок, данные ещё есть. Закрыл таб — всё, пиzдец, кончилась сессия.
- Живёт: Одна сессия вкладки/окна.
- Места: Столько же, сколько у
localStorage. - Доступ: Только в той вкладке, где создал. Откроешь новую — там будет пусто, как в кармане у студента после стипендии.
sessionStorage.setItem('tempData', '123'); // Временная пометка, типа "не показывать это окно снова"А чем это лучше старых-добрых кукисов, спросишь ты? Ну смотри, табличка, блядь, наглядная:
| Критерий | Web Storage | Кукисы (Cookies) |
|---|---|---|
| Сколько влезет | ~5-10 МБ (целый роман, ёпта) | ~4 КБ (короткая записка, и то с трудом) |
| Лезет ли к серверу | Нет, сидит себе тихо в браузере | Да, сука, с каждым твоим запросом на сервер тащится, как чемодан без колес |
| Сколько проживёт | Постоянно или одна сессия | Пока срок не кончится (сам задаёшь) |
| Доступ из JS | Полный, делай что хочешь | Тоже полный (если не стоит флажок HttpOnly, тогда нихуя не получится) |
Где это применять, бля? Ну, например, чтобы пользователь тему сайта не переключал каждый раз. Или чтобы какую-нибудь простыню данных временно закешировать, чтобы не дергать сервак по сто раз. Токены туда же можно пихать, но осторожно, ёпта, это не самое безопасное место, в рот меня чих-пых.