IndexedDB -это API с низким уровнем уровня, в котором хранится большое количество структурированных данных (включая файлы/ Blobs) для хранения клиента. API использует индекс для достижения поиска данных с высокой производительности.
Недавно существуют бизнес -потребности, которые могут хранить данные в автономном режиме, а форма и изображения могут быть загружены, когда есть сетевые сигналы. Поэтому я изучал IndexedDB HTML5.
Для потребностей только хранения определенных полей можно использовать локальное хранение и сессионное хранение. Но как только будет сохранено большое количество данных, локальное хранение и хранение сессий далеко не удовлетворяет потребности. В настоящее время будет отражена сила IndexedDB.
1. Создать или открыть базу данных/* Совместим с различными браузерами Indexeddb*/const Indexeddb = window.indexeddb || Версия); // Имя: Имя базы данных, версия:
Поскольку IndexedDB совместим в разных браузерах, нам нужна часть функции, которая будет совместима с IndexedDB.
2. Функция обратного вызова, подключенная к базе данных Request.addeventlistener ('Success', function (event) {// Открыть или создать успех базы данных}, false); );После подключения к базе данных запрос прослушивает три состояния:
Собственное состояние состоит в том, чтобы отслеживать это состояние, когда IndexedDdb создает новую базу данных и indexedb.open (имя, версия) версия (номер версии базы данных). Когда номер версии не изменится, это состояние не будет запускается. Создание и удаление объектного магазина базы данных выполняются в соответствии с этим событием мониторинга.
3. Создать и удалить объект -магазинВ IndexedDB ObjectStore аналогична таблице баз данных.
Request.AddeventListener ('uppradeneed', function (event) {// Создать экземпляр базы данных const db = event.target.result; // Выключить базу данных db.close (); // bkystorenames.contains (objectStorEname); / Удалить ObjectStore db.deleteObjectStore (ObjectStorEname);}, false);Вы можете использовать следующий метод для создания магазина объекта
Request.addeventlistener ('uppradeneed', function (event) {// Создать экземпляр базы данных const db = event.target.result; // определить, существует ли объектно -магазин if (! Db.objectstorename. db .createObjectStore (ObjectStorEname, {KeyPath: KeyPath // CowePath как ключевые слова поиска как ObjectStore}); Индекс уникален});}}, false); 4. Добавление данных, удаление, проверка изменения Request.addeventlistener ('success', function (event) {// Создание экземпляра базы данных const db = event.target.result; // Найти объект Store db.transaction (objectStorEname, wa); // wa is 'readwrite', Когда данные могут быть прочитаны и записывают // Когда данные «чтения», данные считывают только const store = transaction.objectstore (objectStorEname);}, false);Добавление базы данных, удаление и изменения:
// Добавить данные. Соответствующий магазин данных ('Success', function (event) {// Функция обратного вызова}, false);Найти данные в соответствии с индексами
Const index = store.index (indexname); значение // data result.continue ();
Найти данные в соответствии с объемом индекса
const index = store.index (indexname); Объект idbkeyrange - это данные указанного диапазона указанного диапазона условия в соответствии с условиями*/// больше, чем или более или равным диапазону = idbkeyrange.lowerbound (значение, true) // (значение, + ∞),> valuerange = idbkeyrange. (Значение, Isopen) // больше или равное значению1, меньшее, чем или равное значению2idbkeyrange.bound (value1, value2, isopen1, isopen2)
Наконец, библиотека IndexedDB инкапсулируется.
Выше представлено индексное вещество локального хранилища HTML5, представленного Xiaobian. Большое спасибо за вашу поддержку на веб -сайте Vevb Wulin!