Помимо файлов cookie: хранилище данных для веб-приложений

Но давайте поговорим об этом промежутке на секунду. Почему файлы cookie не являются хорошим способом хранения данных для веб-приложений? Файлы cookie позволяют хранить лишь небольшой объем данных - всего 4 КБ. Вы можете хранить только строки, а это значит, что вам нужно будет написать слой кода синтаксического анализа и анализа, который преобразует ваши данные в строки, а затем анализирует строки обратно в данные. Это усложняет рассуждение о вашем приложении и делает его подверженным ошибкам. Кроме того, поскольку файлы cookie добавляются к каждому HTTP-запросу, чем больше размер вашего файла cookie, тем более раздутыми становятся ваши запросы. Это недостатки файлов cookie.

Некоторые из этих недостатков были устранены с появлением новой технологии под названием localStorage. С localStorage вы получаете чрезвычайно простой API, который позволяет вам читать и писать в Document. Больше никаких странных строк для получения доступа к вашим данным, потому что с localStorage вы можете просто сделать

localStorage.setItem('operator', 'G Adventures')
localStorage.getItem('operator')

localStorage действительно имеет свой набор недостатков. Во-первых, localStorage - это синхронный API, работающий в одном потоке. Итак, вам нужно будет подождать, пока он помещает данные в базу данных. Сложно использовать localStorage API с рабочими службами или веб-рабочими из-за того, что он синхронный. Кроме того, localStorage API - это не что иное, как хранилище значений ключей, а это означает, что вы все еще застряли на тупых маленьких строках. Хранение любых «реальных» данных (например, объекта) становится рутиной, которая включает в себя множество вызовов методов, таких какJSON.stringify(). И, наконец, по многим причинам localStorage работает медленно.

Чтобы устранить недостатки как localStorage, так и файлов cookie, появилась новая технология: IndexedDB API. Некоторые из вас, возможно, уже слышали об этом. Я постараюсь объяснить, как им пользоваться, и надеюсь выделить его преимущества.

IndexedDB - это хранилище объектов. Это означает, что вы можете хранить объекты Javascript в IndexedDB. Вам не нужно преобразовывать или сериализовать данные перед их сохранением, что похоже на то, чтобы положить бальзам на болезненную боль, которую вызывает разработка JS.

Помимо этого преимущества, с IndexedDB легче работать, поскольку он транзакционный и асинхронный (см. Примеры ниже). Вы читаете и записываете в контексте транзакции; вы передаете транзакцию браузеру, а затем браузер перезванивает вам, когда он завершит обработку ваших данных. Это хорошо работает и с рабочими.

Еще одно преимущество использования IndexedDB - это простой API, который он предоставляет. Если вы когда-либо раньше работали с базами данных, такими как MySQL, вы, возможно, помните, как открывали соединение с базой данных. Вот как это сделать с IndexedDB.

const request = indexedDB.open('myDB', 1)

1 - это версия вашей базы данных. Поскольку ваша база данных может изменяться со временем, версия сообщает клиенту, как создать эту конкретную итерацию базы данных.

Следующее, что нужно узнать, - это настроить начальное хранилище. Мы делаем это с помощью события под названием onupgradeneeded.

request.onupgradeneeded = function(event) {
     // code to set up the object store
}

Мы ищем event.target.result. Вся важная информация, которую мы получаем от событий IndexedDB, находится в этой переменной, так что запишите ее!

Теперь вы можете создать свое хранилище объектов, описав его. В приведенном ниже примере хранилище объектов называется «сообщениями».

request.onupgradeneeded = function(event) {
    const upgradeDb = event.target.result
    upgradeDb.createObjectStore('messages', {
        keyPath: 'id',
        autoincrement: true
    })
}

Вы заметите, что мы передали createObjecStore объект, который содержит некоторые параметры. Один из них - keyPath, который указывает на уникальный ключ, который будет у каждого объекта.

У нас есть еще одно событие, которое мы можем прослушать, это событие onError. Мы можем использовать это, чтобы проверить, успешно ли настроена наша база данных или что-то не удалось.

request.onerror = function(event) {
    console.error(event)
}

Чтобы получить доступ к вашей базе данных, мы воспользуемся другим событием под названием onsuccess.

let db
request.onsuccess = function(event) {
    db = event.target.result
    // our database is successfully set up!
}

Итак, после того, как вы настроили свою базу данных, представьте, что вы хотите поместить в нее некоторые данные.

Мы делаем это, создавая транзакцию.

const transaction = db.transaction('messages', 'readwrite')
const objectStore = transaction.objectStore('messages')
const message = {
    text: 'Sahi hai!',
    id: 1
}
const request = objectStore.put(message)
request.onsuccess = function(event) {
    console.log(event)
    console.log('worked')
}

Теперь, чтобы прочитать сообщения из базы данных. Курсор будет перебирать каждое сообщение в магазине и возвращать значение каждого сообщения. Затем мы можем добавить сообщение в список, как в этом примере.

const transaction = db.transaction('messages', 'readonly')
const objectStore = transaction.objectStore('messages')
const request = objectStore.openCursor()
let messageList
request.onsuccess = function(event) {
    const cursor = event.target.results
    if (cursor) {
        messageList.addMessage(cursor.value)
        cursor.continue()
    } else {
        console.log(messageList)
    }
}

Если вы хотите узнать больше о том, о чем вы читали здесь, ознакомьтесь с прекрасным докладом Фила Нэша: Пустая база данных в кармане каждого. В нем более подробно рассматриваются такие вещи, как cursor, и более подробно рассматривается IndexedDB.

Мы хотели бы увидеть примеры того, как вы используете IndexedDB в своих проектах, в комментариях ниже!

Следите за нами в Medium и Twitter, чтобы увидеть больше отрывков из мира технологий согласно G!

Хотите помочь G Adventures изменить жизнь людей и путешествовать по миру? Ознакомьтесь со всеми нашими вакансиями и подайте заявку сегодня.