Как сохранить запись 20000 строк таблицы в локальном хранилище веб-браузера?

Question

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

Я пытался использовать websql

var result, name, version, display_name, size

name         = 'listofdata'
version      = 1.0
display_name = 'listofdata'
size         = 2621440 

// parameters: name, version, display name, size (in bytes)
db = window.openDatabase(name, version, display_name, size)

result = 'Database "' + display_name + '" created'
addResult(result, createDB)

Я хочу работать и в других браузерах, но понятия не имею.

Answer 1

Прежде всего, убедитесь, что ваши 20К-записи могут умещаться в 5 МБ хранилище в localStorage.

Сейчас подходит к:

Я ищу руководство по его реализации, но в таком случае оно не может повлиять на производительность браузера при поиске или сортировке.

Первый подход: Для сортировки и поиска наилучшим вариантом (с точки зрения логики и производительности) было бы сохранение всех записей в одном строковом массиве JSON в localStorage, а затем используя .filter() и .sort() методы объекта Array для их поиска и сортировки соответственно. Имейте в виду, что обход 20К записей может занять несколько секунд (1-4 секунды или около того, в зависимости от вычислительной мощности машины). Этот подход будет удобен, если вы хотите получить доступ и обработать все записи сразу.

Второй подход: Храните каждую запись индивидуально, используя некоторый вид первичного / уникального ключа для идентификации каждого из них. Затем по мере необходимости просто извлекайте нужную, как вы обычно выбираете любую пару ключ-значение из localStorage. Что касается поиска и сортировки, вы можете использовать Object.keys() и Object.entries(), чтобы довольно быстро получить все записи, а затем использовать те же методы .filter() и .sort() для поиска и сортировки, как указано в первом подходе.

Вам необязательно использовать базу данных indexeddb или SQL. Это достижимо при использовании localStorage, просто это может быть применимо только для небольших записей и в сценариях, где масштабирование, скорее всего, никогда не произойдет.