JS об'єкт Storage
Введення до Storage
Об'єкт Storage
у JavaScript є частиною Web Storage API і дозволяє зберігати пари ключ-значення в сесійному або локальному сховищі. Він допомагає зберігати дані між сеансами переглядача, і ці дані можуть бути доступні навіть після закриття вкладки або вікна переглядача (в залежності від типу сховища).
JavaScript надає доступ до двох типів сховищ даних: localStorage
і sessionStorage
. Обидва сховища функціонують за допомогою пар ключ-значення і мають однаковий інтерфейс, але вони відрізняються за тривалістю зберігання даних і контекстом доступу.
localStorage
: Це довготривале сховище. Дані, збережені тут, залишаються після закриття вікна або вкладки браузера. Якщо користувач вирішив зберегти свої налаштування, наприклад, режим "темна тема" для веб-сайту, то ці налаштування можна зберегти в localStorage
. Так, користувачеві не потрібно буде встановлювати ці налаштування знову при наступному відвідуванні сайту.
Приклад:
localStorage.setItem('theme', 'dark');
У цьому прикладі ми зберігаємо налаштування теми для веб-сайту. Коли користувач наступного разу відвідає сайт, можна легко витягти це значення та встановити потрібний режим.
sessionStorage
: Це сховище для даних сеансу. Дані в sessionStorage
зберігаються тільки протягом сеансу відвідування веб-сайту. Якщо, наприклад, ви хочете зберегти дані про пункти, додані в кошик користувачем під час покупок, вам слід використовувати sessionStorage
. Після закриття вкладки або вікна даних вже не буде.
Приклад:
sessionStorage.setItem('cartItem', 'Product123');
Тут ми зберігаємо інформацію про товар, доданий до кошика. Якщо користувач закриє вкладку або вікно і повернеться до сайту, інформація про кошик буде втрачена.
Ці два типи сховищ забезпечують гнучкість при роботі з даними на клієнтській стороні. У загальному випадку робота з localStorage
та sessionStorage
дуже схожа. Вибір між цими двома варіантами повинен базуватися на вашій конкретній потребі щодо тривалості зберігання даних.
Робота з даними в сховищі
Робота з даними у localStorage
та sessionStorage
відносно проста завдяки їх ключ-значення інтерфейсу. Якщо вам потрібно зберігати, отримувати, оновлювати або видаляти дані, ви можете зробити це за допомогою декількох методів:
Додавання даних:
Метод setItem
дозволяє зберігати пари ключ-значення в сховищі.
Приклад:
localStorage.setItem('username', 'JohnDoe');
У цьому прикладі ми зберігаємо ім'я користувача 'JohnDoe' з ключем 'username'. Коли вам потрібно отримати це ім'я користувача пізніше, ви зможете звертатися до нього за допомогою цього ключа.
Отримання даних:
Метод getItem
дозволяє отримувати значення за допомогою ключа.
Приклад:
let user = localStorage.getItem('username');
console.log(user); // Виведе: JohnDoe
Тут ми отримуємо збережене раніше ім'я користувача з ключем 'username' та виводимо його в консоль. Якщо даного ключа не існує в сховищі, метод поверне null
.
Видалення даних:
Якщо вам потрібно видалити певний елемент з сховища, використовуйте метод removeItem
.
Приклад:
localStorage.removeItem('username');
Після виконання цього коду, ім'я користувача з ключем 'username' більше не буде доступне в сховищі. Спроба отримати його за допомогою getItem
поверне null
.
Очищення сховища:
Якщо вам потрібно повністю очистити сховище, використовуйте метод clear
.
Приклад:
localStorage.clear();
Цей метод видалить усі пари ключ-значення з localStorage
. Будьте обережні з його використанням, оскільки він видалить усі дані, не лише ті, які ви зберігали в поточній сесії.
Нотатка: | Як правило, більшість браузерів надає обмеження розміру в 5-10 МБ для кожного сховища ( |
Нотатка: | Операції з сховищем є синхронними, що може призвести до блокування основного потоку, якщо використовується велика кількість даних. |
Нотатка: |
|
Порада: | Хоча дані зберігаються локально, вони можуть бути вразливими для атак, таких як cross-site scripting. Не зберігайте конфіденційну інформацію без шифрування. |
Порада: | Зміни в |
Синтаксис
localStorage.setItem('key', 'value');
sessionStorage.setItem('key', 'value');
Переглядачі
Переглядач | |||||
---|---|---|---|---|---|
4 |
3.5 |
4 |
10.5 |
12 |
Переглядач | ||||
---|---|---|---|---|
37 |
18 |
6 |
3.2 |
Переглядач | ||
---|---|---|
0.10.0 |
1.10 |
Приклади
Якщо у веб-застосунку є певні налаштування користувача, наприклад, тема інтерфейсу (світла або темна), ви можете зберігати їх в localStorage
для підтримки вибору користувача при наступних відвідуваннях.
// Збереження налаштувань
localStorage.setItem('theme', 'dark');
// Отримання налаштувань при завантаженні сторінки
let userTheme = localStorage.getItem('theme');
if (userTheme) {
document.body.className = userTheme;
}
Коли користувач додає товари до кошику, але не завершує покупку, ви можете використовувати localStorage
для зберігання цієї інформації. При наступному відвідуванні сайту товари будуть вже у кошику.
let cart = [
{id: 1, name: "Item A", quantity: 2},
{id: 2, name: "Item B", quantity: 1}
];
// Зберігання кошику
localStorage.setItem('cart', JSON.stringify(cart));
// Відновлення кошику при наступному відвідуванні
let savedCart = JSON.parse(localStorage.getItem('cart') || '[]');
Для простих онлайн ігор ви можете зберігати прогрес користувача (рівень, досвід тощо) у localStorage
, щоб він міг продовжити грати з місця, де зупинився.
let gameProgress = {
level: 5,
points: 3000
};
// Зберігання прогресу гри
localStorage.setItem('gameProgress', JSON.stringify(gameProgress));
// Відновлення прогресу при наступному відвідуванні
let savedProgress = JSON.parse(localStorage.getItem('gameProgress') || '{}');