Сортировка на стороне клиента

Idb-keyval — это лёгкая обёртка над IndexedDB, предоставляющая простой интерфейс для работы с ключ–значение парами. Она идеально подходит для задач локального хранения данных на стороне клиента, включая кеширование, хранение настроек пользователя и временных данных. Библиотека позволяет легко выполнять операции set, get, delete и clear, минимизируя сложность работы с нативным IndexedDB API.

import { get, set, del, clear } from 'idb-keyval';

// Сохранение данных
set('username', 'Ivan').then(() => console.log('Данные сохранены'));

// Получение данных
get('username').then(val => console.log('Значение:', val));

// Удаление данных
del('username').then(() => console.log('Данные удалены'));

// Очистка всех данных
clear().then(() => console.log('Все данные удалены'));

Хранение и сортировка массивов объектов

Для реализации сортировки на стороне клиента часто используется подход с хранением массива объектов в IndexedDB через idb-keyval. Основная идея — сохранять данные в виде массива, а затем извлекать его, сортировать и отображать.

const users = [
    { name: 'Иван', age: 30 },
    { name: 'Мария', age: 25 },
    { name: 'Пётр', age: 40 }
];

// Сохраняем массив пользователей
set('users', users);

// Получаем и сортируем по возрасту
get('users').then(users => {
    users.sort((a, b) => a.age - b.age);
    console.log(users);
});

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

Сортировка по различным критериям

Использование метода Array.sort() позволяет реализовать гибкую сортировку по любому полю объекта. Примеры наиболее часто используемых вариантов:

Сортировка по строковым значениям

get('users').then(users => {
    users.sort((a, b) => a.name.localeCompare(b.name));
    console.log(users);
});

localeCompare обеспечивает корректное сравнение строк с учётом языковых особенностей, включая кириллицу.

Сортировка по числовым значениям

get('users').then(users => {
    users.sort((a, b) => b.age - a.age); // Сортировка по убыванию
    console.log(users);
});

Сортировка с учётом нескольких критериев

get('users').then(users => {
    users.sort((a, b) => {
        if (a.age === b.age) {
            return a.name.localeCompare(b.name);
        }
        return a.age - b.age;
    });
    console.log(users);
});

Такой подход позволяет комбинировать числовые и строковые поля для сложной сортировки.

Работа с большими объёмами данных

При хранении и сортировке больших массивов объектов следует учитывать память и производительность. IndexedDB позволяет хранить объекты любой структуры, но извлечение больших массивов в память браузера может быть ресурсоёмким. Для оптимизации можно:

  1. Разбивать данные на пакеты и загружать их частями.
  2. Использовать виртуальные списки при отображении на странице, чтобы не рендерить все элементы сразу.
  3. Кэшировать уже отсортированные данные, чтобы не повторять сортировку при каждом запросе.

Асинхронная работа и промисы

Все методы idb-keyval возвращают промисы, что позволяет использовать современный синтаксис async/await:

async function sortUsers() {
    const users = await get('users');
    users.sort((a, b) => a.age - b.age);
    await set('users', users); // Сохраняем уже отсортированные данные
}

sortUsers();

Использование async/await делает код более читаемым и упрощает обработку ошибок:

async function safeSortUsers() {
    try {
        const users = await get('users') || [];
        users.sort((a, b) => a.age - b.age);
        await set('users', users);
    } catch (err) {
        console.error('Ошибка при работе с IndexedDB:', err);
    }
}

safeSortUsers();

Индивидуальные хранилища

idb-keyval позволяет создавать отдельные хранилища, что удобно для организации данных по категориям:

import { Store, get, set } from 'idb-keyval';

const userStore = new Store('user-db', 'user-store');

async function saveUser(user) {
    await set(user.name, user, userStore);
}

async function loadUser(name) {
    return await get(name, userStore);
}

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

Резюме ключевых практик

  • Все операции с idb-keyval асинхронные, нужно использовать промисы или async/await.
  • Сортировка выполняется после извлечения данных из IndexedDB.
  • Для строковых данных использовать localeCompare, для числовых — стандартное вычитание.
  • Для больших массивов объектов применять постраничную загрузку и кэширование.
  • Можно создавать несколько независимых хранилищ для структурирования данных.

Эти приёмы позволяют эффективно использовать idb-keyval для клиентской сортировки и управления данными, сохраняя простоту и гибкость кода.

Оглавление