Варіанти використання API веб-сховища HTML

Існує кілька способів використання веб-сховища у ваших веб-додатках. Фронтенд-розробники використовують сучасний API веб-сховища браузера для створення більш персоналізованих, ефективних і адаптивних веб-сайтів. У цій статті ми розглянемо багато варіантів використання, які допоможуть вам створювати цікаві веб-додатки.

API веб-сховища HTML5 - це механізм зберігання, який дозволяє веб-додатку зберігати дані локально на стороні клієнта. Дані зберігаються у веб-браузері користувача. Він працює подібно до файлів cookie, але з більшим лімітом зберігання та потужнішим API. Ліміт зберігання HTML5 становить щонайменше 5 МБ. Цей ліміт є більшим порівняно з файлами cookie, які мають ліміт лише 4 КБ на домен. Існує широка підтримка цього API у багатьох браузерах.

Огляд API веб-сховища HTML5

API веб-сховища HTML5 допомагає покращити продуктивність веб-сайту, прискорюючи його роботу. Це пов'язано з тим, що веб-сховище має великий простір для зберігання даних на стороні клієнта. Великий обсяг пам'яті дозволяє веб-програмам безперешкодно працювати зі збереженими даними, забезпечуючи цікавий досвід для користувачів.

У веб-сховищі HTML5 існує два типи сховищ, відомі як localStorage і sessionStorage. Обидва вони відіграють різні ролі у зберіганні даних у веб-браузері користувача. Отже, що таке API localStorage і sessionStorage? Чим вони відрізняються один від одного? Давайте подивимося:

• localStorage API: Він надає інтерфейс для веб-додатків для постійного зберігання даних. Це означає, що дані зберігаються після завершення поточного сеансу браузера. Навіть коли ви закриваєте вкладку або браузер, сховище даних не буде очищено. Об'єкт локального сховища дозволяє розробникам отримувати та видаляти дані за допомогою унікальних ключів.
• sessionStorage API: Цей API веб-сховища надає зручний спосіб тимчасового зберігання даних. Дані зберігаються до тих пір, поки активна вкладка браузера або сеанс перегляду. Цей API найкраще використовувати для зберігання тимчасової інформації, необхідної лише протягом одного сеансу.

localStorage і sessionStorage зберігають дані в парах ключ/значення. Розробники можуть використовувати ці ключі для взаємодії зі збереженими даними. Щоб зберігати дані в localStorage, ви можете присвоїти їм унікальне ім'я (ключ) і пов'язати цей ключ зі значенням. Наприклад, ви можете зберігати таке ім'я:

//зберігання даних з допомогою localStorage
localStorage.setItem('name', 'Josh');

Ви можете зберігати кілька типів даних, наприклад, тексти, об'єкти та числа. Ви також можете отримати ці дані за допомогою відповідного ключа. Наприклад, ви можете отримати дані таким чином:

//здобуття даних зі сховища localStorage
const name = localStorage.getItem('name');

You can also remove stored data in localStorage like this:

//видалення збережених даних
localStorage.removeItem('name');

localStorage та sessionStorage працюють аналогічно і слідують тим самим рядкам коду. Якщо ви плануєте реалізувати sessionStorage, ви повинні замінити об'єкт localStorage у коді вище на sessionStorage.

Основна відмінність між цими двома API полягає в тому, що дані зберігаються постійно в локальному сховищі, а тимчасово - в сеансовому сховищі. Можливості API веб-сховищ HTML5 безмежні, якщо застосовувати їх творчо. У наступному розділі ми розглянемо кілька варіантів використання як localStorage так і sessionStorage API.

Варіанти використання API локального сховища

1. Збереження налаштувань користувача: API локального зберігання пропонує надійне рішення для зберігання налаштувань користувача. Він пропонує мовні опції, щоб ви могли вибрати мову, якій надаєте перевагу. Він також зберігає такі налаштування, як тема (світла чи темна), розмір шрифту тощо. Ці налаштування зберігаються після закриття сторінки і можуть бути відновлені, коли ви повернетесь.

2. Створення персоналізованого користувацького досвіду: Персоналізований користувацький досвід зазвичай походить від здатності Local storage API зберігати налаштування користувача. Він зберігає дані про ваші звички та інтереси, щоб створити середовище, яке ідеально підходить для вас. Наприклад, сайт електронної комерції може зберігати тип продукту, який ви переглядали, і надавати рекомендації щодо ваших наступних відвідувань.

3. Зберігання даних для використання в Інтернеті: API локального зберігання використовує дані кешу, щоб допомогти вам отримати доступ до певних частин веб-сайту в автономному режимі. Це найбільше підходить для веб-сайтів зі статичним контентом, який рідко змінюється. Ви також можете читати статті у веб-додатку в автономному режимі, а коли з'єднання буде відновлено, додаток синхронізує оновлення.

4. Зберігання ігрових даних для браузерних ігор: Ви можете легко зберігати ігрові досягнення та прогрес за допомогою Local storage API. Він зберігає імена гравців, найвищі бали та іншу важливу інформацію. Таким чином, ви можете продовжити гру з того місця, де ви зупинилися, замість того, щоб починати заново.

5. Збереження стану сеансу: Ви можете зберегти стан сеансу, якщо ваш браузер закривається під час заповнення форми або створення онлайн-документа. Незавершене завдання буде відновлено, як тільки ви відновите з'єднання.

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

Варіанти використання API зберігання сесій

API sessionStorage ідеально підходить для випадків, коли дані потрібні лише тимчасово. Залежно від того, що ви намагаєтеся створити у веб-додатку, ви можете використовувати сховище сесій для декількох варіантів використання. Давайте розглянемо деякі з них:

1. Тимчасове зберігання даних під час сеансів: sessionStorage  зберігає тимчасову інформацію, яка є важливою і пов'язана з вашою взаємодією у веб-додатку. Сюди входять такі дані, як бажаний інтерфейс, мова та динамічні налаштування. Ці дані будуть доступні протягом усього сеансу і будуть втрачені після його завершення.

2. Підтримання узгодженості даних у кількох вікнах або вкладках: Якщо ви відкриваєте кілька вкладок у веб-програмі, сховище сеансів синхронізує дані між усіма відкритими вкладками. Якщо ви додасте елемент на одній вкладці, він буде синхронізований з іншими.

3. Зберігання даних під час заповнення форми: Якщо ви випадково закрили форму під час заповнення у вікні браузера, API зберігання сеансів дозволяє продовжити з того місця, де ви зупинилися. Значення кожного поля зберігається під час заповнення форми і буде доступне після того, як ви втратите і відновите з'єднання.

4. Ефективна та швидка автентифікація користувача: sessionStorage тимчасово зберігає маркери автентифікації після входу в веб-програму або сайт. Цей маркер автентифікації допомагає перевіряти ваш статус протягом всієї взаємодії. Вам не потрібно постійно вводити та підтверджувати свої дані.

Що стосується позбавлення від конфіденційних даних, sessionStorage відіграє ключову роль. Зберігання конфіденційної інформації локально може становити ризик для безпеки, якщо ви не будете обережними. sessionStorage допомагає зменшити ці ризики, видаляючи конфіденційні дані (потенційно особисту інформацію) одразу після закриття сеансу.

Висновок

У фронтенд-розробці випадки використання веб-сховища HTML5 охоплюють різні сфери. Вони варіюються від збереження даних для використання в автономному режимі до створення персоналізованого інтерфейсу у веб-додатках тощо. Всі ці варіанти використання працюють разом, щоб забезпечити безперебійну роботу для всіх, хто користується вашими веб-програмами.

Використовуючи API веб-сховища HTML5, ви зможете створювати веб-додатки, які будуть добре сприйматися широкою аудиторією. Важливо зазначити, що API локального сховища і сесійного сховища слід використовувати там, де вони дають оптимальні результати. Використання  sessionStorage там, де слід було б використовувати  localStorage може бути трохи заплутаним для користувачів.

Джерело:  https://blog.openreplay.com/use-cases-for-htmls-web-storage-API/