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. Будьте обережні з його використанням, оскільки він видалить усі дані, не лише ті, які ви зберігали в поточній сесії.

правити

Порада

Хоча дані зберігаються локально, вони можуть бути вразливими для атак, таких як cross-site scripting. Не зберігайте конфіденційну інформацію без шифрування.

автор: Bond правити

Порада

Зміни в localStorage будуть доступні для всіх вкладок та вікон, які використовують той же домен. Тому ви можете використовувати його для синхронізації стану між різними вкладками.

автор: Bond правити

Нотатка

Як правило, більшість браузерів надає обмеження розміру в 5-10 МБ для кожного сховища (localStorage та sessionStorage). Пам'ятайте про це, коли зберігаєте великі об'єкти або масиви.

автор: Bond правити

Нотатка

Операції з сховищем є синхронними, що може призвести до блокування основного потоку, якщо використовується велика кількість даних.

автор: Bond правити

Нотатка

localStorage та sessionStorage можуть зберігати лише рядкові дані. Якщо вам потрібно зберегти об'єкти або масиви, використовуйте JSON.stringify() перед зберіганням та JSON.parse() при отриманні.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

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.setItem('theme', 'dark');

// Отримання налаштувань при завантаженні сторінки
let userTheme = localStorage.getItem('theme');
if (userTheme) {
    document.body.className = userTheme;
}

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') || '[]');

let gameProgress = {
    level: 5,
    points: 3000
};

// Зберігання прогресу гри
localStorage.setItem('gameProgress', JSON.stringify(gameProgress));

// Відновлення прогресу при наступному відвідуванні
let savedProgress = JSON.parse(localStorage.getItem('gameProgress') || '{}');