localStorage VS sessionStorage
Головна відмінність
| Характеристика | localStorage | sessionStorage |
|---|---|---|
| Час зберігання | Дані зберігаються назавжди, поки користувач сам не очистить або код не видалить | Дані зберігаються лише поки відкрита вкладка/вікно |
| Після перезавантаження сторінки | Зберігаються | Зберігаються |
| Після закриття вкладки | Зберігаються | Видаляються |
| Спільна доступність між вкладками одного домену | Так | Ні (у кожної вкладки своє сховище) |
| Обсяг | ~5-10 МБ | ~5 МБ |
| Тип даних | Лише рядки (використовується JSON.stringify) | Лише рядки (так само через JSON.stringify) |
| Обмеження доступу | Лише той самий домен | Лише той самий домен і вкладка |
| Часте застосування | Теми, налаштування, токени, кеш даних | Тимчасові стани, фільтри, чернетки, сесійні токени |
Приклад коду (однаковий API)
javascript
// localStorage
localStorage.setItem('theme', 'dark');
console.log(localStorage.getItem('theme')); // "dark"
// sessionStorage
sessionStorage.setItem('step', '2');
console.log(sessionStorage.getItem('step')); // "2"Після закриття вкладки:
localStorage-> значення залишиться,sessionStorage-> буде очищено автоматично.
Коли використовувати який
localStorage - для "довговічних" даних
Використовуй, якщо дані мають жити після закриття браузера:
- вибрана тема (dark/light),
- запам'ятований логін,
- кошик покупок,
- налаштування користувача.
sessionStorage - для "тимчасових" даних
Використовуй, якщо потрібно зберігати стан всередині однієї сесії:
- тимчасові форми та фільтри,
- стан кроків у майстрі реєстрації,
- сесійний токен авторизації.
Приклад практичної відмінності
javascript
// у першій вкладці
localStorage.setItem('color', 'red');
sessionStorage.setItem('page', 'home');
// у другій вкладці того самого сайту:
console.log(localStorage.getItem('color')); // "red" доступно
console.log(sessionStorage.getItem('page')); // null недоступноКоротко підсумок
| Сховище | Живе | Спільні дані між вкладками | Видаляється |
|---|---|---|---|
| localStorage | назавжди | так | вручну або очищенням браузера |
| sessionStorage | поки вкладка відкрита | ні | при закритті вкладки |
Запам'ятай просто:
localStorage- постійне сховище (для "довгоживучих" даних).sessionStorage- тимчасове сховище (для "поточної сесії").
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.