Categories: JS & jQuery

IndexedDB для хранения больших структурированных данных на клиенте

IndexedDB — стандарт хранения больших структурированных данных на клиенте. Это объектная база данных, которая намного мощнее, эффективнее и надежней, чем веб-хранилище пар ключ/значение, доступное посредством прикладного интерфейса Web Storage. Является простой коллекцией именованных хранилищ объектов. Каждый объект должен иметь ключ, под которым он сохраняется и извлекается из хранилища.

Существует также возможность выполнять поиск по значениям других свойств объекта. Чтобы обеспечить эту возможность, в хранилище объектов можно определить любое количество индексов. Каждый индекс определяет вторичный ключ хранимых объектов. Эти индексы в целом могут быть неуникальными, и одному и тому же ключу может соответствовать множество объектов. Поэтому в операциях обращения к хранилищу объектов с использованием индекса обычно используется курсор, определяющий прикладной интерфейс для извлечения объектов из потока результата по одному.

В качестве примера показано хранение файлов:

var indexedDB    = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB,
 IDBTransaction  = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction,
 baseName    = "filesBase",
 storeName    = "filesStore";

function logerr(err){
 console.log(err);
}

function connectDB(f){
 var request = indexedDB.open(baseName, 1);
 request.onerror = logerr;
 request.onsuccess = function(){
  f(request.result);
 }
 request.onupgradeneeded = function(e){
  e.currentTarget.result.createObjectStore(storeName, { keyPath: "path" });
  connectDB(f);
 }
}

function getFile(file, f){
 connectDB(function(db){
  var request = db.transaction([storeName], "readonly").objectStore(storeName).get(file);
  request.onerror = logerr;
  request.onsuccess = function(){
   f(request.result ? request.result : -1);
  }
 });
}

function getStorage(f){
 connectDB(function(db){
  var rows = [],
   store = db.transaction([storeName], "readonly").objectStore(storeName);

  if(store.mozGetAll)
   store.mozGetAll().onsuccess = function(e){
    f(e.target.result);
   };
  else
   store.openCursor().onsuccess = function(e) {
    var cursor = e.target.result;
    if(cursor){
     rows.push(cursor.value);
     cursor.continue();
    }
    else {
     f(rows);
    }
   };
 });
}

function setFile(file){
 connectDB(function(db){
  var request = db.transaction([storeName], "readwrite").objectStore(storeName).put(file);
  request.onerror = logerr;
  request.onsuccess = function(){
   return request.result;
  }
 });
}

function delFile(file){
 connectDB(function(db){
  var request = db.transaction([storeName], "readwrite").objectStore(storeName).delete(file);
  request.onerror = logerr;
  request.onsuccess = function(){
   console.log("File delete from DB:", file);
  }
 });
}

Ссылка на подробный источник

 

 

 

Руслан Раянов

Recent Posts

Форма теста внешних действий #falconstart

Вызов внешних действий - это возможность действия, выходящего за рамки возможности работы с БД через…

2 недели ago

Концепция внешних действий – telegram, email, уведомления на сайте

Вызов внешних действий - это возможность действия, выходящего за рамки возможности работы с БД через…

2 недели ago

Работа с JSON в SQL #falconstart

После выполнения действий в SQL на клиенте иногда возникает необходимость что-то обновить или сделать. Для…

3 недели ago

Форма с отправкой запроса API. Тестирование исходящих запросов #falconstart

Вы можете обратиться к внешним API через использование Внешних действий (код apirequest, использование описано в…

3 недели ago

Таблица Trace для отслеживания событий на сайте

В системной таблице as_trace хранятся данные по работе приложения. Поле code определяет тип события: DBLREQ…

3 недели ago

Работа с ошибками в системе. Генерация отчета по ошибкам #falconstart

Рассмотрим механизм анализа ошибок, как это всё работает, и как его использовать. Когда происходит ошибка…

4 недели ago