Коли ми користуємось сайтом, йому часто потрібно щось запам’ятати:
- чи увійшли ми в акаунт
- яку мову обрали
- на якому кроці форми знаходимось
Для цього браузер має кілька способів зберігання даних. Розглянемо 3 найпопулярніші.
1. LocalStorage — “пам’ять надовго”
LocalStorage — це памʼять браузера, яка не зникає сама по собі.
Простими словами: сайт щось запам’ятав і буде пам’ятати це навіть після закриття браузера.
Приклад із життя:
Ти зайшов на сайт, увімкнув темну тему. Наступного дня знову відкрив сайт — тема все ще темна. Це і є LocalStorage.
Приклад коду:
localStorage.setItem("theme", "dark");
Що зазвичай зберігають:
- тему сайту (світла / темна)
- мову
- налаштування користувача
Чого НЕ варто зберігати:
❌ паролі
❌ важливі секретні дані
2. SessionStorage — “пам’ять на один раз”
SessionStorage — це пам’ять тільки поки відкрита вкладка.
Простими словами: закрив вкладку — все стерлось.
Приклад із життя:
Ти заповнюєш форму з 3 кроків:
- Ім’я
- Підтвердження
Поки вкладка відкрита — сайт пам’ятає, на якому ти кроці. Закрив вкладку — починаєш з нуля.
Приклад коду:
sessionStorage.setItem("step", "2");
Що зберігають:
- кроки форм
- тимчасові дані
- стан сторінки
3. Token — “перепустка на сайт”
Token — це спеціальний код, який каже сайту:
“Цей користувач уже увійшов, йому можна довіряти”
Простими словами: Token = перепустка / пропуск
Як це працює:
- Ти вводиш логін і пароль
- Сервер перевіряє дані
- Сервер дає тобі Token
- Кожен запит до сервера йде з цим Token
Приклад:
Authorization: Bearer TOKEN
Де зберігають Token:
- 🔴 LocalStorage — погано
- 🟡 SessionStorage — можна, але не ідеально
- 🟢 Cookies (HTTP-only) — найкраще
5. Як запам’ятати легко
Налаштування зберігаємо у LocalStorage. Сайт пам’ятає вибір теми, мови та інші персональні параметри надовго.
Тимчасові дані зберігаємо у SessionStorage. Це інформація, яка потрібна лише під час роботи з відкритою вкладкою.
Вхід у систему реалізується через Token. Токен підтверджує, що користувач уже авторизований.
Висновок
LocalStorage — сайт пам’ятає тебе довго, навіть після закриття браузера.
SessionStorage — сайт пам’ятає тебе лише на час роботи з вкладкою.
Token — сайт розуміє, що ти “свій” і дозволяє доступ до захищених сторінок.
Це базові поняття, які обов’язково потрібно знати кожному, хто вивчає Frontend-розробку
