Ответ
localStorage и sessionStorage — это Web Storage API, позволяющие хранить данные в браузере пользователя в формате «ключ-значение». Их основное различие — в времени жизни и области видимости.
Сравнительная таблица
| Критерий | localStorage | sessionStorage |
|---|---|---|
| Время жизни | Данные сохраняются бессрочно (до явного удаления JS, очистки кеша браузера или данных сайта). | Данные очищаются при закрытии вкладки браузера (сессия страницы). |
| Область видимости | Общий для всех вкладок и окон с одним доменом (происхождением). | Изолирован для каждой отдельной вкладки. Даже если открыть ту же страницу в новой вкладке — будет новое хранилище. |
| Лимит хранения | ~5-10 МБ на домен (зависит от браузера). | ~5-10 МБ на домен (зависит от браузера). |
Пример использования
// Запись данных
localStorage.setItem('userTheme', 'dark');
sessionStorage.setItem('formDraft', JSON.stringify({ name: 'John' }));
// Чтение данных
const theme = localStorage.getItem('userTheme'); // 'dark'
const draft = JSON.parse(sessionStorage.getItem('formDraft')); // {name: 'John'}
// Удаление данных
localStorage.removeItem('userTheme');
sessionStorage.clear(); // Очищает все данные текущей сессииКогда что использовать:
localStorage— для долгосрочных настроек пользователя (тема, язык), токенов (с осторожностью) или данных для офлайн-работы.sessionStorage— для временных данных сессии: ввод в форме с автозаполнением, состояние многошагового процесса, передача данных между страницами в рамках одной вкладки.
Ответ 18+ 🔞
О, смотри-ка, народ опять путается в этих своих хранилищах! Ну ладно, разберём, как же они работают, эти два брата-близнеца, которые друг на друга похожи, а на деле — хуй да не тот.
Вот есть у тебя в браузере два ящика: один — localStorage, другой — sessionStorage. Оба умеют складывать данные по принципу «ключ-значение», как в словарик. Но живут они по-разному, пиздец как по-разному.
localStorage — это как твой личный сейф дома. Положил туда настройку тёмной темы — и она там будет лежать до скончания веков. Пока ты сам её не выкинешь, браузер не почистишь или сайт не попросит удалить. И самое главное — этот сейф один на всю квартиру. Откроешь ту же страницу в другой вкладке — а там уже твоя тема подгрузится, потому что ящик-то общий.
sessionStorage — это как корзинка в супермаркете. Зашёл в одну вкладку — взял корзинку, накидал туда черновик формы. Пока ходишь по этой вкладке — всё при тебе. Но как только закрыл вкладку — корзинку у тебя выхватили и всё выкинули. И ещё прикол: откроешь ту же страницу в новой вкладке — тебе дадут новую, пустую корзинку. Прошлая сессия — в пизду, её не существует.
А теперь, чтобы совсем мозг не ебал, глянь табличку:
| Критерий | localStorage | sessionStorage |
|---|---|---|
| Время жизни | Лежит вечно, пока не пристрелишь. | Умирает при закрытии вкладки. |
| Область видимости | Общий для всех вкладок и окон с одним доменом. | Изолирован для каждой отдельной вкладки. Новая вкладка — новый мир. |
| Лимит хранения | ~5-10 МБ на домен (зависит от браузера, но в целом — овердохуища для текста). | Столько же, ~5-10 МБ. |
Ну и как с этим работать, спросишь? Да элементарно!
// Запись данных
localStorage.setItem('userTheme', 'dark'); // Положил в сейф
sessionStorage.setItem('formDraft', JSON.stringify({ name: 'John' })); // Кинул в корзинку
// Чтение данных
const theme = localStorage.getItem('userTheme'); // Достал из сейфа — 'dark'
const draft = JSON.parse(sessionStorage.getItem('formDraft')); // Вынул из корзинки — {name: 'John'}
// Удаление данных
localStorage.removeItem('userTheme'); // Выкинул одну вещь из сейфа
sessionStorage.clear(); // Вытряхнул всю корзинку к хуям собачьимТак когда что юзать, чтобы не облажаться?
localStorage— для того, что должно пережить твои похороны. Настройки темы, язык, какой-нибудь токен (только осторожно, ёпта, безопасность!), данные для офлайн-режима.sessionStorage— для временного барахла одной сессии. Черновик огромной формы, чтобы не пропал при обновлении, состояние многошаговой регистрации, передача данных между страницами в одной вкладке. Закрыл вкладку — и нет проблем, всё само очистилось.
Вот и вся магия. Главное — не перепутай, а то получится, как у того Герасима: захотел временно сохранить, а получил вечную муму в localStorage.