Время от времени нам нужно сохранить / сохранить что-то в базе данных или нам нужно кэшировать некоторые данные. Это может быть связано с тем, что мы хотим повысить производительность, поддерживать автономный режим или нам просто нужна функция, для которой требуется веб-хранилище.
Итак, какие варианты есть у нас прямо сейчас:
1) Хранить все данные в базе данных сервера (SQL или NoSQL)
2) LocalStorage / SessionStorage - ограниченная память (около 5 МБ)
3) WebSQL - он устарел в пользу IndexedDB
4) IndexedDB - спроектированная как «одна настоящая» база данных браузера с объемом 50 МБ и более.
tl; dr Воспользуйтесь библиотекой из раздела заключения, чтобы облегчить себе жизнь.
Итак, IndexedDB FTW
Просто чтобы назвать несколько основных концепций в IndexedDB:
база данных, объектное хранилище, индексы, транзакция, курсор,…
Покажи мне код
Давайте напишем код, чтобы поместить некоторые данные в базу данных.
Теперь давайте сделаем нашу жизнь проще
Для этого я воспользуюсь idb, написанным Джейком Арчибальдом. Вместе с библиотекой idb мы можем использовать новую функцию браузеров async / await.
Ой, подождите, но async / await поддерживается не всеми браузерами. Нет проблем, возьмите свой код, перенесите его с помощью babel / traceur / typescript, и мы готовы.
Теперь давайте посмотрим, как мы можем лучше писать с хранением данных.
😎😎😎
Хотя IndexedDB имеет асинхронный API, это выглядит так красиво, не правда ли?
Теперь, чтобы просто убедиться, что данные сохранены, откройте вкладку приложения devtools.
Мы можем получить данные по определенному ключу или все сохраненные данные с помощью кода ниже.
Заключение
Одним из преимуществ веб-хранилища, подобного этому, является то, что мы используем Redux или какое-то управление состоянием, если мы сохраняем состояние пользователей в IndexedDB, и когда пользователь в следующий раз посещает нашу страницу / приложение, пользователь получает ранее сохраненное состояние и бум, пользователь может продолжить, где он ушел.
Существует множество библиотек, облегчающих нашу жизнь при работе с IndexedDB. Назовем лишь некоторые из них: localForage, pouchdb, idb, idb-keyval, Dexie.js, IDBWrapper.
