Наповнення JS розділу

Добридень, Пані та Панове, завдяки вам вдалося зібрати більше 19тис грн з необхідних 15тис на впровадження JS розділу.

JS розділ вже впроваджено - переходимо до його наповнення і почнемо бігти довгий марафон, адже JS має більше 1100 різноманітних методів, властивостей, подій і т.д., які необхідно описати.

Будемо працювати, і вдень, і вночі, щоб орієнтовно взимку закінчити наповнювати JS розділ!

Ви також можете допомогти нам в цьому. Долучайтеся до нашої спільноти в дискорді - ставайте її частиною і допомагайте нашому розвитку.

Також, підтримуйте нас матеріально.

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 МБ для кожного сховища (localStorage та sessionStorage). Пам'ятайте про це, коли зберігаєте великі об'єкти або масиви.

Нотатка:

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

Нотатка:

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

Порада:

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

Порада:

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

Синтаксис

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') || '{}');

Методи

Властивості