Поширені фронтенд-рішення для зберігання даних переважно включають:Cookie、Web Storage、IndexedDB、WebSQL、local Storage、session Storageтощо, наприклад:
| ознака | Печиво | localStorage | sessionStorage | indexedDB | | Життєвий цикл даних | Зазвичай генерується сервером, і час закінчення можна встановити; Також можна генерувати компоненти, такі як прийняття фронтенду та js-cookie | Якщо його не прибрати, він завжди на місці; Коли браузер закрито, він також зберігається локально, але кросбраузер не підтримується | Очищення та оновлення сторінки все одно існують, коли сторінка закрита, і міжсторінкова взаємодія не підтримується | Якщо його не прибрати, він завжди існував | | Розмір сховища даних | 4K | 5M | 5M | Без обмежень по розміру | | Спілкування з сервером | Він щоразу зберігається у запитуваному заголовку, що впливає на виконання запиту; Водночас, оскільки він включений у запит, він також схильний до проблем із безпекою | Не беру участі | Не беру участі | Не беру участі | | особливість | Пари ключ-значення рядків зберігають дані локально | Пари ключ-значення рядків зберігають дані локально | Пари ключ-значення рядків зберігають дані локально | IndexedDB — це нереляційна база даних (операції через SQL-оператори не підтримуються). Він може зберігати великі обсяги даних, надавати інтерфейси для запитів і створювати індекси, чого інші рішення для зберігання не можуть надати. |
IndexedDB
Ця стаття головним чином описує використання IndexedDB для фронтенд-зберігання і представлена наступним чином:
IndexedDB — це базовий API для зберігання великих обсягів структурованих даних (також великих об'єктів файлів/бінарних (blobs)) на стороні клієнта. API використовує індекси для забезпечення високопродуктивного пошуку даних. Хоча веб-сховище корисне для зберігання менших обсягів даних, воно гірше за зберігання більших обсягів структурованих даних. IndexedDB пропонує рішення для цієї ситуації. Ця сторінка є основним посібником для MDN IndexedDB — тут ми надаємо повний посібник з довідками та використанням API, деталі підтримки браузера та посилання на деякі пояснення ключових понять.
IndexedDB має такі функції:
(1) Парне зберігання ключ-значення. IndexedDB використовує сховище об'єктів для зберігання даних. Всі типи даних можуть бути розміщені безпосередньо, включаючи JavaScript-об'єкти. У репозиторії об'єктів дані зберігаються у вигляді «пар ключ-значення», і кожен запис даних має відповідний первинний ключ, який є унікальним і не може бути відтворений, інакше виникне помилка.
(2) Асинхронний. IndexedDB не блокує браузер, і користувач все одно може виконувати інші операції, на відміну від LocalStorage, який працює синхронно. Асинхронний дизайн покликаний запобігти читанню та запису великих обсягів даних, уповільнюючи продуктивність веб-сторінок.
(3) Підтримуючі справи. IndexedDB підтримує транзакції, що означає, що якщо один із кроків операції не вдасться, вся транзакція буде скасована, а база даних повертається до стану до здійснення транзакції, і переписування лише частини даних не відбувається.
(4) Гомологічне обмеження. IndexedDB підпорядковується тому ж ліміту походження, і кожна база даних відповідає доменному імені, яке її створило. Веб-сторінки можуть отримувати доступ до баз даних лише під власними доменними іменами, а не до міждоменних баз даних.
(5) Велике місце для зберігання. IndexedDB має значно більший об'єм пам'яті, ніж LocalStorage, зазвичай не менше 250 МБ, і немає верхньої межі.
(6) Підтримка бінарного зберігання. IndexedDB може зберігати не лише рядки, а й бінарні дані (об'єкти ArrayBuffer та об'єкти Blob).
Якщо важко почати безпосередньо з IndexedDB і потрібно інкапсулювати його самостійно, можна використовувати деякі пакети, наприклад:
- localForage: Простий Polyfill, який забезпечує простий синтаксис значень для сховищ даних на стороні клієнта. Він використовує IndexedDB у фоновому режимі і повертається до WebSQL або localStorage у браузерах, які не підтримують IndexedDB.
- Dexie.js: Обгортки IndexedDB дозволяють швидше розробляти код завдяки простому синтаксису.
- ZangoDB: Інтерфейс IndexedDB, схожий на MongoDB, який підтримує більшість знайомих функцій фільтрації, проєкції, сортування, оновлення та агрегації MongoDB.
- JsStore: обгортка IndexedDB з SQL-синтаксисом.
- MiniMongo: MongoDB у клієнтській пам'яті, що підтримується локальним сховищем, синхронізація серверів через http. MeteorJS використовує MiniMongo.
- PouchDB: Клієнт, який реалізує CouchDB у браузері за допомогою IndexedDB.
- idb: Крихітна (〜1.15k) бібліотека з більшістю API, схожою на IndexedDB, але з деякими незначними покращеннями, які значно покращують зручність бази даних.
- idb-keyval: Дуже просте та невелике (~600B) обіцянкове парне зберігання ключ-значення, реалізоване за допомогою IndexedDB.
- sifrr-storage: Дуже невелика (~2kB) база даних на основі обіцянків на стороні клієнта. Реалізовано на основі IndexedDB, localStorage, WebSQL та Cookies. Він може автоматично обирати підтримувані бази даних, згадані вище, і використовувати їх у порядку пріоритету.
- lovefield: Lovefield — це реляційна база даних для веб-додатків, написана на JavaScript, може працювати в різних браузерних середовищах і надає SQL-подібний API, який є швидким, безпечним і простим у використанні.
localForage
localForage — це швидкий і простий JavaScript-репозиторій. localForage покращує офлайн-досвід веб-додатків, використовуючи асинхронне зберігання (IndexedDB або WebSQL) та простий API, схожий на localStorage. localForage використовує localStorage у браузерах, які не підтримують IndexedDB або WebSQL.
Адреса GitHub:Вхід за гіперпосиланням видно.
Китайський туторіал:Вхід за гіперпосиланням видно.
localForage надає два різних js-файли, відмінності такі:
localforage.js: бібліотека Promise, що містить реалізацію lie (Вхід за гіперпосиланням видно.), файл досить великий, і синтаксис promise можна використовувати в старіших браузерах.
localforage.nopromises.js: Немає реалізації Promise, підтримуються лише нові версії браузерів.
Тестовий код:
(Кінець)
|
Опубліковано 12.10.2023 20:42:27
|
|
|
|
Орендодавець|
Опубліковано 02.03.2025 19:12:18
|
