Учебное пособие по использованию клиентского хранилища в веб-приложениях

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

Что такое IndexedDB?

IndexedDB — это низкоуровневый API для хранения на стороне клиента больших объемов структурированных данных, включая файлы и BLOB-объекты. В отличие от localStorage, IndexedDB позволяет хранить сложные типы данных, а не только строки. Он использует асинхронную транзакционную модель базы данных, что делает его эффективным для приложений, которым необходимо обрабатывать большие наборы данных или синхронизировать данные в автономном режиме.

Зачем использовать IndexedDB?

• Возможности автономного режима: Идеально подходят для прогрессивных веб-приложений (PWA) и приложений, ориентированных на автономный режим.
• Емкость хранилища: IndexedDB может хранить гораздо больше данных по сравнению с localStorage (который ограничен примерно 5–10 МБ).
• Гибкость: Храните сложные объекты, такие как массивы, объекты и даже большие двоичные объекты.
• Асинхронный: Операции не блокируют поток пользовательского интерфейса, что означает, что ваше приложение остается отзывчивым.

Начало работы: настройка IndexedDB

Давайте углубимся в основные этапы работы с IndexedDB. Мы рассмотрим:

• Создание или открытие базы данных
• Создание хранилищ объектов (таблиц)
• Добавление данных
• Чтение данных
• Обновление данных
• Удаление данных

Шаг 1: Открытие базы данных

Для взаимодействия с IndexedDB сначала необходимо открыть соединение с базой данных. Если база данных не существует, она будет создана.

const request = indexedDB.open('MyCustomersDatabase', 1);

request.onerror = (event) => {
    console.error('Database error:', event.target.errorCode);
};

request.onsuccess = (event) => {
    const db = event.target.result;
    console.log('Database opened successfully', db);
};

request.onupgradeneeded = (event) => {
    const db = event.target.result;
    if (!db.objectStoreNames.contains('customers')) {
        const objectStore = db.createObjectStore('customers', { keyPath: 'id' });
        objectStore.createIndex('name', 'name', { unique: false });
        objectStore.createIndex('email', 'email', { unique: true });
        console.log('Object store created.');
    }
};

Вот что происходит:

• indexedDB.open открывает или создает базу данных.
• onerror обрабатывает любые ошибки при открытии базы данных.
• onsuccess срабатывает, когда соединение с базой данных успешно открыто.
• onupgradeneeded запускается, когда базу данных необходимо обновить (например, если база данных открывается впервые или изменяется версия). Здесь вы определяете свои хранилища объектов (представьте их как таблицы SQL).

Шаг 2. Добавление данных в IndexedDB

Теперь, когда у нас настроена база данных и хранилище объектов, давайте добавим в нее немного данных.

const addCustomer = (db, customer) => {
    const transaction = db.transaction(['customers'], 'readwrite');
    const objectStore = transaction.objectStore('customers');
    const request = objectStore.add(customer);

    request.onsuccess = () => {
        console.log('Customer added:', customer);
    };

    request.onerror = (event) => {
        console.error('Error adding customer:', event.target.errorCode);
    };
}

const customer = { id: 1, name: 'John Doe', email: '[email protected]' };

request.onsuccess = (event) => {
    const db = event.target.result;
    addCustomer(db, customer);
};

Вот что происходит:

• Мы создаем транзакцию с доступом для чтения и записи, чтобы разрешить внесение изменений.
• Метод add() используется для вставки данных в хранилище объектов.
• Мы прослушиваем события успеха и ошибки, чтобы убедиться, что данные были успешно добавлены.

Шаг 3. Чтение данных из IndexedDB

Чтение данных из IndexedDB также не вызывает затруднений. Давайте получим только что добавленного клиента, используя метод get().

const getCustomer = (db, id) => {
    const transaction = db.transaction(['customers'], 'readonly');
    const objectStore = transaction.objectStore('customers');
    const request = objectStore.get(id);

    request.onsuccess = (event) => {
        const customer = event.target.result;
        if (customer) {
            console.log('Customer found:', customer);
        } else {
            console.log('Customer not found.');
        }
    };

    request.onerror = (event) => {
        console.error('Error fetching customer:', event.target.errorCode);
    };
}

request.onsuccess = (event) => {
    const db = event.target.result;
    getCustomer(db, 1); // Fetch customer with ID 1
};

Шаг 4. Обновление данных в IndexedDB

Чтобы обновить существующую запись, мы можем использовать метод put(), который работает аналогично add(), но заменяет запись, если ключ уже существует.

const updateCustomer = (db, customer) => {
    const transaction = db.transaction(['customers'], 'readwrite');
    const objectStore = transaction.objectStore('customers');
    const request = objectStore.put(customer);

    request.onsuccess = () => {
        console.log('Customer updated:', customer);
    };

    request.onerror = (event) => {
        console.error('Error updating customer:', event.target.errorCode);
    };
}

const updatedCustomer = { id: 1, name: 'Jane Doe', email: '[email protected]' };

request.onsuccess = (event) => {
    const db = event.target.result;
    updateCustomer(db, updatedCustomer);
};

Шаг 5. Удаление данных из IndexedDB

Наконец, чтобы удалить запись, используйте метод delete().

const deleteCustomer = (db, id) => {
    const transaction = db.transaction(['customers'], 'readwrite');
    const objectStore = transaction.objectStore('customers');
    const request = objectStore.delete(id);

    request.onsuccess = () => {
        console.log('Customer deleted.');
    };

    request.onerror = (event) => {
        console.error('Error deleting customer:', event.target.errorCode);
    };
}

request.onsuccess = (event) => {
    const db = event.target.result;
    deleteCustomer(db, 1); // Delete customer with ID 1
};

Заключение

IndexedDB — это надежное решение для хранения данных на стороне клиента, особенно в веб-приложениях, предназначенных для работы в автономном режиме. Следуя этому руководству, вы узнали, как:

• Открыть и создать базу данных
• Создание хранилищ объектов
• Добавление, чтение, обновление и удаление данных

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

Ссылки:

1. Веб-документы MDN — API IndexedDB
   
   Подробное руководство о том, как работает IndexedDB, его методы API и варианты использования.
   
   Руководство по MDN IndexedDB

2. Разработчики Google – IndexedDB
   
   Подробная статья, описывающая лучшие практики и использование IndexedDB для создания автономных веб-приложений.
   
   Разработчики Google – IndexedDB

3. API индексированной базы данных W3C
   
   Официальная спецификация W3C, описывающая техническую реализацию и структуру IndexedDB.
   
   Спецификация W3C IndexedDB

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

Удачного программирования!