Локальное хранилище было постоянной темой во фронтенд-разработке. Мы знакомы с использованием файлов cookie и веб-хранилища (включая sessionStorage и localStorage). Эти методы хорошо известны, и вопросы, связанные с ними, часто возникают в реальных проектах.

1. Идеальный подход для хранения больших объемов данных: IndexedDB.

Однако у этих методов локального хранения есть некоторые заметные недостатки:

1. Ограниченная емкость хранилища. Даже при использовании localStorage, который предлагает самую большую емкость среди этих методов, мы по-прежнему ограничены примерно 5 МБ хранилища данных.

2. Неудобное извлечение. Данные, хранящиеся в этих механизмах локального хранения, сериализуются. При получении нестроковых данных требуется десериализация, что усложняет извлечение данных.

Имея дело с крупномасштабными потребностями в локальном хранилище, мы часто рассматриваем возможность использования indexedDB, который позволяет выполнять операции, подобные базе данных, для локального хранилища в браузере.

Я также написал более раннюю статью, объясняющую, как использовать indexedDB.



Однако работать с indexedDB может быть сложно, и для этого требуется время обучения.

Сегодня я хотел бы познакомить вас с новым другом: localForage.

Прежде чем продолжить, давайте рассмотрим характеристики indexedDB.

2. Характеристики IndexedDB

IndexedDB — это низкоуровневый API, используемый для хранения больших объемов структурированных данных (включая файлы и большие двоичные объекты) на стороне клиента.

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