Головна » Розробка » localForage — Що робити, якщо localStorage вже не вистачає?

localForage — Що робити, якщо localStorage вже не вистачає?

localForage Коли йдеться про збереження даних у браузері, localStorage часто є першим інструментом, який використовують розробники. Це проста у використанні технологія для зберігання пар ключ-значення. Проте, коли обсяг даних перевищує її можливості або з’являються складніші вимоги до роботи з даними, localStorage може виявитися недостатнім. Саме тоді на сцену виходить localForage — бібліотека, яка розширює можливості збереження даних у браузері. У цій статті ми розглянемо, що таке localForage, його переваги, особливості використання та приклади застосування.

Що таке localForage?

localForage — це JavaScript-бібліотека для роботи з веб-сховищами, яка дозволяє зберігати великі обсяги даних, у тому числі складні структури (масиви, об’єкти, файли). Бібліотека побудована поверх API браузера, таких як IndexedDB, WebSQL і localStorage, і автоматично обирає найкращий доступний механізм для збереження даних.

Основні особливості localForage:

  1. Підтримка великих обсягів даних: Дозволяє зберігати мегабайти інформації, що значно перевищує ліміт localStorage.
  2. Підтримка асинхронних операцій: Використання Promise-інтерфейсу для більш ефективної роботи з даними.
  3. Збереження складних типів даних: Ви можете зберігати масиви, об’єкти, зображення, файли тощо.
  4. Кросбраузерність: Бібліотека працює у більшості сучасних браузерів.

Чому localStorage може бути недостатнім?

1. Обмеження на розмір сховища

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

2. Синхронна робота

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

3. Підтримка лише рядкових значень

localStorage зберігає дані лише у вигляді рядків. Це означає, що складні структури, такі як об’єкти чи масиви, потрібно конвертувати у JSON перед збереженням, а потім парсити при читанні.

Приклад роботи з localStorage:

localStorage.setItem('user', JSON.stringify({ name: 'John', age: 30 }));
const user = JSON.parse(localStorage.getItem('user'));
console.log(user.name); // John

Цей підхід працює, але швидко стає незручним у великих додатках.

Переваги localForage

localForage вирішує всі основні проблеми localStorage, забезпечуючи гнучкість і потужність.

1. Асинхронність

localForage використовує асинхронні операції для запису та читання даних, що запобігає блокуванню головного потоку.

Приклад:

import localforage from 'localforage'; 
localforage.setItem('key', 'value')
 .then(() => { return localforage.getItem('key'); })
 .then((value) => { console.log(value); // 'value' })
 .catch((err) => { console.error(err); });

2. Збереження складних даних

localForage підтримує об’єкти, масиви, файли та навіть зображення.

Приклад збереження об’єкта:

localforage.setItem('user', { name: 'John', age: 30 }).then(() => {
return localforage.getItem('user');
}).then((user) => {
console.log(user.name); // John
});

3. Автоматичний вибір сховища

Бібліотека автоматично обирає найкращий доступний механізм збереження, починаючи з IndexedDB і переходячи до WebSQL або localStorage, якщо це необхідно.

4. Підтримка Promise і колбеків

localForage підтримує Promise і старий підхід із колбеками, що дозволяє інтегрувати її у будь-який додаток.

Як почати використовувати localForage?

1. Встановлення

Встановіть localForage через npm або yarn:

npm install localforage

Або підключіть через CDN:

<script src="https://cdn.jsdelivr.net/npm/localforage/dist/localforage.min.js"></script>

2. Ініціалізація

localForage можна налаштувати відповідно до потреб вашого додатка:

localforage.config({
driver: localforage.INDEXEDDB, // Використовувати IndexedDB
name: 'myApp',
version: 1.0,
storeName: 'keyvaluepairs', // Ім'я сховища
description: 'Моє сховище для додатка'
});

Приклади використання localForage

Збереження файлів

const file = new Blob(['Hello, world!'], { type: 'text/plain' });

localforage.setItem('file', file).then(() => {
return localforage.getItem('file');
}).then((savedFile) => {
console.log(savedFile.size); // Розмір файлу
});

Кешування API-запитів

localForage ідеально підходить для кешування даних із серверу.

Приклад:

function fetchData(url) {
return localforage.getItem(url).then((cachedData) => {
if (cachedData) {
return cachedData;
}
return fetch(url)
.then((response) => response.json())
.then((data) => {
localforage.setItem(url, data);
return data;
});
});
}
// Використання
fetchData('https://api.example.com/data').then((data) => {
console.log(data);
});

Збереження зображень

const image = new Blob([], { type: 'image/jpeg' });

localforage.setItem('image', image).then(() => {
return localforage.getItem('image');
}).then((savedImage) => {
console.log(savedImage.type); // 'image/jpeg'
});

Поради для роботи з localForage

  1. Очищуйте застарілі дані:
    Використовуйте localforage.removeItem('key') або localforage.clear() для очищення непотрібних даних.
  2. Використовуйте ключі з неймінгом:
    Використовуйте зрозумілі імена ключів для легшого керування даними.
  3. Резервне сховище:
    Якщо дані є критичними, подумайте про резервне копіювання на сервер.

Висновок

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

Якщо ваш додаток вимагає більше, ніж може запропонувати localStorage, спробуйте localForage — і ви побачите, як значно можна покращити роботу зі збереженням даних у браузері.