Статьи

Создание текстового редактора в браузере с помощью IndexedDB

Ноябрь 14, 2018

SimplyWrite — это бесплатный инструмент для веб-отвлечения. Он основан на IndexedDB HTML5, поэтому вам необходим браузер. Поскольку при использовании IndexedDB весь контент хранится локально на вашем компьютере , никакие данные не передаются и не хранятся на удаленном сервере.

Есть много других решений, как  WriteRoom ,  OmmWriter или  FocusWritter , но SimplyWrite извлекает выгоду из того факта , что это клон веб — инструмент.

Вы можете скачать исходники с github .

Пожалуйста, посмотрите и дайте мне знать ваши предложения.

На данный момент SimplyWrite был протестирован только на Chromium 9, потому что требуется реализация браузера IndexedDB.

Помимо удивительного объявления

Ладно, SimplyWrite — это круто, и это объявление изменит мир, но… правда в том, что все это потому, что мне нужна цель для работы с IndexedDB.

HTML5 давно отсутствует (почти год — это 100 сотен в Интернете), и скоро появится множество новых функций, которые браузер будет реализовывать в последующих выпусках (по крайней мере, я на это надеюсь).

Хранение на стороне клиента

HTML5 поставляется с различными решениями для хранилища на стороне клиента: WebStorage, Web SQL Database и IndexedDB.

На данный момент одной из основных проблем является HTML5 — отличная спецификация, но большая и сложная для реализации браузерами. Поэтому вам необходимо проверить, поддерживается ли нужная функция браузером, который вы собираетесь использовать.

Таким образом,  WebStorage является механизмом ключ-значение,  WebSQLDatabase , к сожалению, не очень хорошая идея (потому что от него отказались), и, наконец, IndexedDB можно понимать как идеальное сочетание WebStorage и WebSQLDatabase.

WebSQLDatabase, как и Google Gears, был в основном основан на SQLite, потому что многие реализации HTML5 тоже были основаны на SQLite, унаследовав его ограничения. Mozilla никогда не соглашается со стандартом WebDatabase и потому что это никогда не реализует его на своем баузере. Они предпочитают работать в IndexedDB.

Важным соображением является то, что IndexedDB определяет два «рабочих режима»: асинхронный и синхронный, но в данный момент поддерживается только асинхронный режим.

Работа с IndexedDB

Вот кусочки исходного кода для общего действия.

Получение ссылки на IndexedDB

Для работы с IndexedDB необходимо получить ссылку. В настоящее время нет единого способа добиться этого. В Chromium вам нужен доступ к  window.webkitIndexedDB, а в Firefox вам нужно использовать window.mozIndexedDB .

if ( "webkitIndexedDB" in window ) {
    window.indexedDB      = window.webkitIndexedDB;
    window.IDBTransaction = window.webkitIDBTransaction;
    window.IDBTransaction = window.webkitIDBTransaction;
    window.IDBKeyRange    = window.webkitIDBKeyRange;
} else if ( "moz_indexedDB" in window ) {
    window.indexedDB = window.moz_indexedDB;
}
if ( !window.indexedDB ) {
    // Browser doesn’t support indexedDB, do something
    // clever, and then exit early.
    alert("IndexedDB not supported !!!");
}

Создание / Открытие базы данных

Если у вас есть доступ к ссылке на IndexedDB, следующим шагом будет создание или открытие базы данных:

var dbRequest = window.indexedDB.open(
    "SimplyWriteDB",        // Database ID
    "All my SimplyWrities" // Database Description
);

Каждая команда выполняется асинхронно и генерирует объект запроса, в котором вы можете выполнить код для событий «onsuccess» или «onerror».

Инициализация базы данных в первый раз

Используя объект запроса, возвращенный предыдущей командой, мы выполняем следующий код в случае успеха:

dbRequest.onsuccess = function ( e ) {
    var db = e.result;
    if ( db.version === "" ) {
        // Empty string means the database hasn’t been versioned.
        var versionRequest = db.setVersion( "1.0" );
        versionRequest.onsuccess = function ( e ) {
            var store = db.createObjectStore(
            "written",    // The Object Store’s name
            "title",                  // The name of the property to use as a key
            false                 // Is the key auto-incrementing?
            );
        };
    }
};

Базы данных IndexedDB могут иметь разные версии. Вы можете использовать версию для первоначальной инициализации БД или для обновления структуры базы данных. Например, у вас есть база данных с некоторой структурой в версии 1.0, и вы хотите обновить ее, создав новое хранилище объектов и увеличив номер версии до 2.0.

Добавление, получение и удаление контента

На данный момент у нас есть база данных, созданная с одним хранилищем объектов, которое использует «заголовок» в качестве ключа. Теперь мы можем добавлять и получать к нему контент.

var writeTransaction = dbase.transaction(
  ["simplywriteOS"],           // The Object Stores to lock
  IDBTransaction.READ_WRITE,  // Lock type (READ_ONLY, READ_WRITE)
  0
);
// Open a store and generate a write request:
var store = writeTransaction.objectStore("written");
var writeRequest = store.add( {
    "title":  this_is_the_title,
    "text": this_is_the_text
} );
writeRequest.onerror = function ( e ) {
 
};
writeRequest.onsuccess = function ( e ) {
};

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

Одним из важных действий является перебор всех элементов в хранилище объектов. Вы можете сделать это с помощью курсора:

var readCursor = store.openCursor();
readCursor.onsuccess = function ( e ) {
  if ( e.result ) {
    console.log(e.result.value.title);
    e.result.continue();
  } else {
    // If the `success` event’s `result` is null, you’ve reached
    // the end of the cursor’s list.
  }
};

Заключительные слова о SimplyWrite

SimplyWrite написан с использованием HTML и JavaScript (конечно), и я использую несколько других проектов. Я хотел бы отметить использование, в дополнение к jQuery и jQueryUI, двух проектов:

 

Источник: http://acuriousanimal.com/blog/2011/04/17/simplywrite-a-free-web-distraction-writing-tool-based-on-indexeddb/

 

41
Share: